Skip to content
Beta Multi-model support (OpenAI, Gemini, and more) launching soon.

fed-playbook

Standalone Web-only resource. Copy it into Claude, or drop it into your project.
Open Claude.ai

Paste into Claude Code, Claude.ai, the desktop app, or the browser extension — ⌘/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-system for the accessible palette, focus-state CSS, and the full checklist.
  • Brand aqua #14BADB fails 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.