agentleFS
ArogyaReddyArogyaReddy/https-github.com-affaan-m-everything-claude-code1/.agents/skills/frontend-design/SKILL.md

frontend-design

Skill2 starsChanged 7 months agoMITView on GitHub

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

We split this skill into the rules it gives an agent

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

  • 0

    Common

    Most of the 181 edited versions we read keep these.

  • 12

    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 this when the task is not just "make it work" but "make it look designed."

    line 9
  2. Distinctive:

    Do not mix directions casually.

    line 50
  3. Distinctive:

    Use CSS variables or the project's token system so the interface stays coherent as it grows.

    line 63
  4. Distinctive:

    Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.

    line 74
  5. Distinctive:

    create one or two memorable moments

    line 83
  6. Distinctive:

    Do not scatter generic micro-interactions everywhere.

    line 85
  7. Distinctive:

    avoid generic defaults when the page is design-led

    line 93
  8. Distinctive:

    commit to a clear palette

    line 97
  9. Distinctive:

    avoid cliché purple-gradient-on-white unless the product genuinely calls for it

    line 99
  10. Distinctive:

    use diagonals, offsets, and grouping intentionally

    line 117
  11. Distinctive:

    keep reading flow obvious even when the layout is unconventional

    line 118
  12. Distinctive:

    keep accessibility and responsiveness intact

    line 134

“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

Use this when the task is not just "make it work" but "make it look designed."

This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI.

When To Use

  • building a landing page, dashboard, or app surface from scratch
  • upgrading a bland interface into something intentional and memorable
  • translating a product concept into a concrete visual direction
  • implementing a frontend where typography, composition, and motion matter

Core Principle

Pick a direction and commit to it.

Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices.

Design Workflow

1. Frame the interface first

Before coding, settle:

  • purpose
  • audience
  • emotional tone
  • visual direction
  • one thing the user should remember

Possible directions:

  • brutally minimal
  • editorial
  • industrial
  • luxury
  • playful
  • geometric
  • retro-futurist
  • soft and organic
  • maximalist

Do not mix directions casually. Choose one and execute it cleanly.

2. Build the visual system

Define:

  • type hierarchy
  • color variables
  • spacing rhythm
  • layout logic
  • motion rules
  • surface / border / shadow treatment

Use CSS variables or the project's token system so the interface stays coherent as it grows.

3. Compose with intention

Prefer:

  • asymmetry when it sharpens hierarchy
  • overlap when it creates depth
  • strong whitespace when it clarifies focus
  • dense layouts only when the product benefits from density

Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.

4. Make motion meaningful

Use animation to:

  • reveal hierarchy
  • stage information
  • reinforce user action
  • create one or two memorable moments

Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects.

Strong Defaults

Typography

  • pick fonts with character
  • pair a distinctive display face with a readable body face when appropriate
  • avoid generic defaults when the page is design-led

Color

  • commit to a clear palette
  • one dominant field with selective accents usually works better than evenly weighted rainbow palettes
  • avoid cliché purple-gradient-on-white unless the product genuinely calls for it

Background

Use atmosphere:

  • gradients
  • meshes
  • textures
  • subtle noise
  • patterns
  • layered transparency

Flat empty backgrounds are rarely the best answer for a product-facing page.

Layout

  • break the grid when the composition benefits from it
  • use diagonals, offsets, and grouping intentionally
  • keep reading flow obvious even when the layout is unconventional

Anti-Patterns

Never default to:

  • interchangeable SaaS hero sections
  • generic card piles with no hierarchy
  • random accent colors without a system
  • placeholder-feeling typography
  • motion that exists only because animation was easy to add

Execution Rules

  • preserve the established design system when working inside an existing product
  • match technical complexity to the visual idea
  • keep accessibility and responsiveness intact
  • frontends should feel deliberate on desktop and mobile

Quality Gate

Before delivering:

  • the interface has a clear visual point of view
  • typography and spacing feel intentional
  • color and motion support the product instead of decorating it randomly
  • the result does not read like generic AI UI
  • the implementation is production-grade, not just visually interesting

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.

Reviews can't be read right now.

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.