agentleFS
Sign inStart free
komlukkomluk/scaffolding/skills/frontend-design/SKILL.md

frontend-design

Skill16 starsChanged 5 days agoMITView on GitHub

Distinctive, non-generic visual identity for new landing pages and public-facing UI. TRIGGER when: designing a new marketing/landing page or brand-forward UI that must not look templated. SKIP: rules, palette and font databases, a11y checklists (use ui-ux-pro-max); component code (use react-patterns).

187 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use instantly-campaign, albert-dm and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • yawningwhaleAISkill

    instantly-campaign

    Create a new Instantly cold-email campaign in the proven 5-email structure of the user's top-performing campaign (~16% reply rate). Use when the user wants to launch a new outbound campaign, write a cold email sequence, create an Instantly campaign, draft outreach for a new service or niche, or set up a sales sequence.

    Also in 6 projects that use this

  • yawningwhaleAISkill

    albert-dm

    Reply to DMs and messages the way Albert would. Use when the user asks "how would Albert reply to this", pastes a conversation and wants an Albert-style response, or asks you to draft/write a DM in Albert's voice. Albert sells AI voice agents / automations to local service businesses (Go High Level, lead follow-up, bookings).

    Also in 5 projects that use this

  • naman10parikhSkill

    ecosystem-reference

    Quick-access directory of Claude Code ecosystem repos, skills, plugins, MCPs, and patterns. Use when improving the harness.

    Also in 5 projects that use this

  • naman10parikhSkill

    fractal-delegation

    Also in 5 projects that use this

  • julianoczkowskiSkill

    brief-to-tasks

    Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".

    Also in 7 projects that use this

  • SeifBenayedSkill

    file-reading

    Use this skill when a file has been uploaded but its content is NOT in your context — only its path at /mnt/user-data/uploads/ is listed in an uploaded_files block. This skill is a router: it tells you which tool to use for each file type (pdf, docx, xlsx, csv, json, images, archives, ebooks) so you read the right amount the right way instead of blindly running cat on a binary. Triggers: any mention of /mnt/user-data/uploads/, an uploaded_files section, a file_path tag, or a user asking about an uploaded file you have not yet read. Do NOT use this skill if the file content is already visible in your context inside a documents block — you already have it.

    Also in 6 projects that use this

  • +6 more from naman10parikh

The file

We split this skill into the rules it gives an agent

7 rules. 0 are common, 7 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 181 edited versions we read keep these.

  • 7

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use when the goal is a page that looks specific to its subject, not like the output every generator converges on.

    line 8
  2. Distinctive:

    If the user or an existing design system already fixes the look, follow it.

    line 22
  3. Distinctive:

    Before any visual choice, write three lines: what it is, who it is for, what the visitor should do first.

    line 27
  4. Distinctive:

    If the first thing you reach for is on this list, treat it as a default and justify or replace it:

    line 47
  5. Distinctive:

    Default system or most-popular web font, used at one weight

    line 53
  6. Distinctive:

    Every section fading/sliding in on scroll.

    line 55
  7. Distinctive:

    Write a short plan: palette, type roles, layout idea, the one bold element.

    line 76

“Common” is measured: kept by at least 6 in 10 of the 181 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Frontend Design — A Look Worth Remembering

Use when the goal is a page that looks specific to its subject, not like the output every generator converges on. This skill is about taste and decisions. For reference data (style catalogue, palettes, font pairings, UX rules, a11y), use ui-ux-pro-max; for component code, react-patterns / mui-styling.

Boundary with ui-ux-pro-max

QuestionSkill
"Which palette / font pair / UX rule fits this product type?"ui-ux-pro-max (lookup)
"How do I make this page feel unlike every other one?"frontend-design (direction)
Internal tool, dashboard, admin UI, existing design systemui-ux-pro-max only — conventions beat novelty there
New landing page, campaign, portfolio, public product sitefrontend-design, then ui-ux-pro-max to verify a11y/contrast

If the user or an existing design system already fixes the look, follow it. This skill only fills the choices the brief leaves open.

1. Anchor in the subject

Before any visual choice, write three lines: what it is, who it is for, what the visitor should do first. Pull visual material from the subject's own world — its materials, tools, vocabulary, artefacts, era — rather than from "what modern sites look like". A cooperative bakery and a quantum-key vendor should not share a layout.

2. Decide, don't default

Pick one deliberate answer per axis and be able to say why it fits this subject:

AxisDecide
Palette4-6 named hex values; one dominant, one accent, neutrals with a tint
TypeOne or two families with distinct roles; a defined scale and weights
LayoutA single organising idea (grid, axis, rhythm) and an alignment rule
ImageryReal content, diagrams or illustration style — not stock filler
MotionOne orchestrated moment at most; the rest responds to user action

3. Reflex check — common generic tells

If the first thing you reach for is on this list, treat it as a default and justify or replace it:

  • Purple-to-blue gradient hero, glassmorphism, glowing blobs
  • Identical rounded cards in a three-column grid, same shadow on all
  • Centred hero + two buttons + logo strip, always in that order
  • Default system or most-popular web font, used at one weight
  • Emoji or generic line icons as feature bullets
  • Every section fading/sliding in on scroll; hover-lift on every card
  • Filler copy: "Unlock the power of…", "Seamless", "Revolutionary"

A listed trait is fine when the subject genuinely calls for it; the failure is using it because it was the default.

4. Spend boldness once

Choose one memorable element (a typographic treatment, a hero artefact, an unusual layout break) and keep everything around it quiet. Remove decoration that carries no meaning. Contrast between one loud and many calm elements reads as intent; uniform loudness reads as noise.

5. Write the copy as design

Headlines state a concrete claim or outcome. Buttons name the action ("Start a free trial", not "Submit"). Use real or realistic content, never lorem ipsum, and keep one name for one thing across the page.

6. Plan, review, then build

  1. Write a short plan: palette, type roles, layout idea, the one bold element.
  2. Compare it against §3. Rewrite any part you would produce for any similar brief.
  3. Build. Keep CSS specificity flat so section/spacing rules do not cancel out.
  4. Self-critique against the rendered result (screenshot if available).

Quality floor (non-negotiable)

Responsive down to mobile, visible keyboard focus, prefers-reduced-motion honoured, text contrast meets WCAG AA. Verify with ui-ux-pro-max accessibility rules.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free