Propel
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality — avoiding generic AI aesthetics through intentional, opinionated design choices.
This skill is vendored verbatim from anthropics/skills. Propel adds the [Propel] frontmatter prefix and routes it through the mode system; the instruction body is unchanged. See the source repo for LICENSE.
Why This Skill Exists
Without structure, a default LLM frontend is recognizable at a glance: Inter or Arial body font, centered hero section, gradient button, three-column card grid, generic spacing. The "mean of the training data" shows up most visibly in UI work. The frontend-design skill forces an intentional aesthetic commitment before any code is written — brutally minimal, maximalist, retro-futuristic, editorial, brutalist, industrial, and so on — and executes that commitment with precision.
When It Triggers
| Trigger | Details |
|---|---|
| Build requests | "build a landing page", "build a dashboard", "make a React component", "create an HTML/CSS layout" |
| Styling requests | "style this", "beautify the UI", "make this look good", "design the frontend" |
| Artifacts | Posters, standalone web artifacts, one-off interfaces |
The Design Process
- Understand purpose. What problem does this interface solve? Who uses it?
- Commit to a bold aesthetic direction. Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. Intentionality over intensity.
- Identify constraints. Framework, performance, accessibility requirements.
- Define the unforgettable. What is the one thing someone will remember about this interface?
- Implement working code. Production-grade, functional, visually striking, cohesive, meticulously refined.
Aesthetics Guidelines
The full skill body covers detailed guidelines on typography, color, layout, motion, and craft. Key principles:
- Typography — beautiful, unique, distinctive fonts; avoid generic choices like Arial and Inter; pair a distinctive display font with a refined body font.
- Intentionality — every design decision should have a reason traceable to the chosen aesthetic direction.
- Cohesion — one clear point-of-view carried through every element, not a patchwork of trends.
- Refinement — meticulous attention to details: spacing, hierarchy, weight, rhythm.
For the full instruction body, read skills/frontend-design/SKILL.md in the repo, or the upstream source.
Mode Availability
frontend-design is active in Engineer mode only. UI work is implementation, and Propel gates implementation behind investigation + design phases. If the project is a frontend app, the skill activates naturally during the implementation phase; if the request comes in Researcher, Debugger, or Trainer mode, using-propel will suggest /switch engineer.
Interoperating With Propel
| Phase | What Happens |
|---|---|
| Gate 0 (Intake) | Scope the interface: purpose, audience, constraints, the "unforgettable" factor. |
| Investigation | If the project has existing design language, investigate it first — the skill should respect the established aesthetic, not override it. |
| Gate 2 (Post-Design) | Commit to the aesthetic direction before writing code. Present it for approval. |
| Implementation | Skill body drives the code-writing: typography, layout, color, motion choices. |
| Gate 3 (Audits) | Standard Propel auditors run over the code. /c-review optional for broad rubric coverage. |