fed-playbook
Standalone Web-only resource. Copy it into Claude, or drop it into your project.
Paste into Claude Code, Claude.ai, the desktop app, or the browser extension — ⌘/Ctrl+V. ✓ Copied. Switch to Claude and paste — ⌘/Ctrl+V.
ExperimentalNo security review
Front-End Developer Playbook
FEDs build what users see and touch — translating designs into working interfaces, implementing accessibility, and making the experience hold up across devices and browsers. Your work is what clients demo to their executives. This is your RBA Skills toolkit.
Create — build the interface
| Reach for | Why |
|---|---|
component-scaffold skill |
Scaffold production components fast. |
design-to-code-builder (figma-component-scaffold, design-token-extract, design-system-sync, component-a11y-gate) |
Go from Figma + tokens to accessible components. |
rba-design-system resource |
RBA tokens, accessible palette, focus-state CSS, WCAG guidance. |
alt-text-writer / form-spec-builder skills |
Accessible images and well-specified forms. |
user-story-writer skill |
Understand and flag frontend-specific story issues. |
Test & Review — prove it holds up
| Reach for | Why |
|---|---|
accessibility-auditor (accessibility-wcag-scan, accessibility-aria-review) |
Catch WCAG and ARIA issues before the demo. |
code-review-enforcer → a11y-linter / standards-check |
Enforce accessibility and standards in review. |
cwv-quick-check skill |
Sanity-check Core Web Vitals. |
Deliver — document the change
| Reach for | Why |
|---|---|
release-notes-generator → release-notes-developer |
Document UI changes and deployment steps. |
git-commit-pr-writer skill |
Clean commits and PR descriptions. |
FED Tips
- WCAG AA is required on all web output. See
rba-design-systemfor the accessible palette, focus-state CSS, and the full checklist. - Brand aqua
#14BADBfails WCAG at 2.31:1. Use it for decorative elements only — never as text color or a data indicator.
Technical details
- Source
- Standalone resource
- Author
- Kassie Gibbons
- Maturity
- experimental
- Security review
- No security review
- File
resources/fed-playbook.md
Edit this resource on GitHub — opens GitHub's web editor. No git knowledge needed.