Frontloom

Expert-level frontend skill plugins for Claude Code.

Frontloom enforces the quality bar you'd expect from a strong frontend engineer: semantic HTML, accessibility by default, strict TypeScript, complete UI states, security by habit, responsive by design, and repo-aware implementation.

Install

npm install frontloom

What's Inside

Skills

Skills are Claude Code skill plugins that define how Claude should approach frontend work.

| Skill | Description | |---|---| | frontloom-core-fe | Cross-framework baseline: semantics, accessibility, typing, UX states, security, responsive design, component API design, engineering mindset, maintainability | | frontloom-react | React and Next.js idioms: hooks, concurrent features, error boundaries, Server/Client Components, App Router, metadata/SEO, middleware, parallel data fetching, state management | | frontloom-vue | Vue 3 and Nuxt idioms: Composition API, script setup, defineProps/defineEmits/defineModel, composables, useFetch/useAsyncData, Pinia, error boundaries, middleware, server routes | | frontloom-svelte | Svelte 5 and SvelteKit idioms: runes ($state, $derived, $effect), snippets, load functions, form actions, streaming, hooks | | frontloom-angular | Angular idioms: signals, standalone components, @if/@for/@defer, typed reactive forms, DI, RxJS interop, resource(), SSR | | frontloom-astro | Astro idioms: island architecture, client:* directives, Content Collections, View Transitions, hybrid rendering, middleware |

References

References are detailed guides with rules and code examples. Skills read these on demand based on the task at hand.

| Reference | When It's Used | |---|---| | semantic-html.md | Creating or restructuring markup | | accessibility.md | Building forms, dialogs, navigation, tables, or interactive UI | | typescript-strict.md | Defining props, API data, component state, or utility types | | ui-states.md | Building pages, forms, async views, or mutation flows | | security.md | Handling user input, external content, links, third-party integrations | | responsive.md | Building layouts, navigation, viewport-dependent UI | | testing.md | Writing tests (React), MSW setup, accessibility testing | | testing-vue.md | Writing tests (Vue/Nuxt), Pinia testing, composable testing | | performance.md | Core Web Vitals (React/Next.js), rendering strategy, image/font optimization | | performance-vue.md | Core Web Vitals (Vue/Nuxt), routeRules, NuxtImg, reactivity performance | | css-architecture.md | CSS methodology, design tokens, theming, animations, CSS layers | | i18n.md | Internationalization: Intl API, pluralization, RTL, logical properties, text expansion | | review-checklist.md | Final review before completing significant frontend changes (13 sections, 85+ items) |

Quick Setup

npm install frontloom --save-dev
npx frontloom init

That's it. The CLI auto-detects your framework, creates the config, and installs VS Code snippets.

$ npx frontloom init

Frontloom — Frontend Skill Plugins

? Which framework does this project use?
  1) React / Next.js (detected)
  2) Vue / Nuxt
  3) Svelte / SvelteKit
  4) Angular
  5) Astro

✓ Configured .claude/settings.json
✓ Copied snippets → .vscode/frontloom-react.code-snippets

Done! Frontloom is ready.

CLI Options

npx frontloom init                       # Interactive setup
npx frontloom init --yes                 # Accept defaults (auto-detect)
npx frontloom init --framework vue       # Skip framework prompt
npx frontloom init --tool opencode       # Configure for OpenCode
npx frontloom init --no-snippets         # Skip VS Code snippets

How it works

1. Core skill sets the baseline quality bar (semantics, accessibility, typing, security, responsive, etc.)
2. Framework skill adds framework-specific idioms on top of the core standards.
3. References are read on demand — skills tell Claude when to consult each reference based on the task.

Full setup guide: See USAGE.md for Claude Code, OpenCode, multi-framework projects, and advanced configuration.

Guides

| Guide | Description | |---|---| | Monorepo Setup | Turborepo, pnpm workspaces, Nx — shared Frontloom config across packages | | ESLint & Prettier | Linter configs per framework that align with Frontloom standards | | VS Code Snippets | fl- prefixed snippets for all 5 frameworks |

VS Code Snippets

Copy the snippet file for your framework into .vscode/:

cp node_modules/frontloom/snippets/react.code-snippets .vscode/

Type fl- in your editor to access Frontloom patterns — components, forms, data fetching, state, and more.

Quality Standards

Frontloom enforces these non-negotiables:

• Semantic HTML — Use the right element for the job. No div soup.
• Accessibility — Keyboard navigation, focus management, ARIA, screen reader support, touch targets.
• TypeScript strict — No any, no unsafe casts, branded types, discriminated unions, Result pattern.
• Complete UI states — Loading, empty, error, success, disabled, offline, permission, confirmation.
• Security — XSS prevention, link safety, sanitization, no client-side secrets.
• Responsive — Mobile-first, fluid layouts, container queries, touch-aware.
• Progressive enhancement — Build on solid HTML/CSS, then enhance with JS.
• Component API design — Ergonomic, composable, hard to misuse.
• Repo-aware — Match existing patterns instead of introducing new ones.
• Maintainable — Clear, simple, no premature abstractions.
• Performance-conscious — Core Web Vitals, bundle budgets, rendering strategy.
• Well-tested — Behavior-driven tests, MSW for API mocking, accessibility testing.
• Engineering mindset — Know when to push back, manage tech debt intentionally, understand blast radius.

License

MIT