|
|
extensions
Forked verbatim from anthropics/skills/skills/frontend-design (Apache 2.0).
LICENSE.txt preserved. Upstream SKILL.md prose (aesthetic guidance,
archetype list, anti-pattern callouts) kept intact.
Extensions added (clearly marked, load progressively — base SKILL.md
stays lean for simple cases):
SKILL.md:
- Description extended with explicit negative triggers: narrow
maintenance (single CSS bug, dependency upgrade, a11y-only retrofit),
operational contexts where stakeholder has specified "minimal,
functional, no creative direction," backend / API work, non-web UIs
(mobile native, desktop, terminal), and refactoring without visible
design component.
- New "Workflow" section at the end of SKILL.md: four phases (intake,
commitment, build, review) with pointers to reference files. Simple
component tweaks skip the workflow; non-trivial redesigns walk it.
- New "References" section: table mapping file → load-when condition.
- Attribution footer marking upstream source + what's locally added.
references/workflow.md (~150 lines)
Intake questions (purpose, audience, operational context, functional
priority, technical constraints, brand references, success criteria).
Commitment step (archetype pick, trade-offs, font pairing, palette,
motion, layout as one-line decisions). Build reminders. Review
pointer. Guidance on when to skip phases.
references/accessibility.md (~200 lines)
WCAG AA contrast thresholds + practical check guidance. Keyboard
navigation + focus management. Semantic HTML + ARIA rules. Reduced-
motion CSS snippet. Smoke checklist. Operational-context note for
defense / ISR work.
references/responsive.md (~160 lines)
Mobile-first vs desktop-first decision. Named breakpoints (Tailwind-
style) vs magic pixels. Container queries. Aesthetic translation
table — how each archetype handles small-screen scaling. Responsive
typography with clamp(). Operational-dashboard note: desktop-primary
is a legitimate product decision.
references/design-review.md (~170 lines)
Archetype check (does the build read as what was committed to?).
Anti-pattern grep for fonts, palette, layout, motion, backgrounds,
components. Code-quality-match check (ornate design + lazy code =
failure). Performance sanity. Convergence check (if last 3 builds
all used the same archetype, break the pattern). The one-sentence
test for memorability.
references/rationale-template.md (~160 lines)
Template for design-rationale.md alongside the build. Nine sections
(purpose, archetype, locked decisions, deliberately absent,
accessibility, responsive, implementation, open questions,
references). Filled example using a DeepSat SOCOM demo landing page
to show density and specificity.
Structure matches Anthropic's own pdf / docx / webapp-testing pattern
(SKILL.md entry + references/ for progressive disclosure). Makefile
SKILLS extended; make install symlinks globally.
Adoption caveat resolved: name kept as `frontend-design` (not renamed
to ui-design) — "frontend" signals scope (web code, not mobile /
desktop / terminal UIs), upstream parity preserved for attribution.
|
