LLM Front-end Skills

Installable SKILL.md files that teach your AI coding tool modern front-end practices and catch bugs before deploy.

INSTALL $ cp SKILL.md .cursor/skills/
WORKS WITH
  • Cursor
  • Claude Code
  • Gemini CLI
  • Codex CLI
  • GitHub Copilot
  • OpenCode

6 FRONT-END SKILLS

CSS

Modern CSS

Native nesting, container queries, :has(), scroll-driven animations, oklch colors, and CSS layers.
HTML

Components

Semantic HTML, ARIA, native dialog and Popover API, BEM naming.
SPEED

Performance

Core Web Vitals, resource hints, image & font loading, Speculation Rules.
DESIGN SYSTEM

Design Tokens

Two-tier architecture, spacing and type scales, oklch colors, dark/light theming, motion tokens.
SEO

SEO

JSON-LD templates, meta tags, Open Graph, canonical URLs, sitemaps, mobile-first patterns.
A11Y

Accessibility

WCAG 2.2 AA, keyboard nav, focus management, contrast, screen reader patterns.

LLM Review Skills

AI-generated code needs debugging in production. These skills teach your AI coding tool to audit its own output before deploy.

REVIEW · 01

Pre-Deploy

Error handling, debug artifacts, responsive design, form validation, loading states.

Learn more
REVIEW · 02

Security

XSS prevention, input sanitization, CSP, CORS, auth token storage, CSRF protection.

Learn more
REVIEW · 03

Testing

Behavior-first testing, edge cases, a11y contract tests, form flows, network mocking.

Learn more

Prompt Packs

End-to-end prompt playbooks for building complete websites with AI coding agents.

PACK · 01

Portfolio Site

Developer portfolio from scaffold to deploy.

8 milestones
PACK · 02

Business Landing

Hero, features, pricing, FAQ, deploy.

8 milestones
PACK · 03

Course Website

Curriculum, testimonials, pricing, deploy.

8 milestones
PACK · 04

Resume Site

Timeline, skills, projects, print stylesheet.

8 milestones