specgen-react-tailwindlisted

Generate a detailed specification document for building a React SPA (Single Page Application) using React 19, TypeScript 5, Vite 6, Tailwind CSS v3, Headless UI v2, Heroicons, React Router v7, TanStack Query v5, Zustand v5, React Hook Form v7, and Zod v3. Components are built utility-first with Tailwind and made accessible with Headless UI primitives (no component framework like MUI). Authentication (Keycloak OAuth2/OIDC PKCE, generic OIDC, or none), API integration (REST via Axios), and optional features (WebSocket, i18n, TanStack Table data grids, Recharts charts, react-day-picker date pickers, Tiptap rich text) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new React SPA or frontend application styled with Tailwind CSS. Also trigger when the user says things like "spec out a new React Tailwind project", "design
rashidee/co2-skills · ★ 3 · Web & Frontend · score 77

Install: claude install-skill rashidee/co2-skills

# React SPA Specification Generator (Tailwind CSS) This skill generates a comprehensive specification document (Markdown) that serves as a blueprint for building a React Single Page Application styled with Tailwind CSS. The spec is intended to be followed by a developer or a coding agent to produce a fully functional project scaffold. The specification does NOT generate code. It produces a detailed, opinionated technical document describing every layer of the application — from Vite configuration to the Tailwind design-token theme to React Query patterns — so that implementation becomes a mechanical exercise. This skill is the Tailwind-CSS sibling of `specgen-react-mui`. It keeps the same React data stack (React Router, TanStack Query, Zustand, React Hook Form, Zod, Axios) but replaces the Material UI component framework with a **utility-first Tailwind layer**: components are hand-built with Tailwind classes and made accessible with **Headless UI** primitives (Dialog, Menu, Listbox, Combobox, Switch, Tabs, Popover, Transition) and **Heroicons**. ## Technology Stack ### Core Stack (Always Included) These are the fixed versions the spec targets. Do not deviate unless the user explicitly requests different versions. | Component | Version | |----------------------|-----------| | React | 19.x | | TypeScript | 5.x | | Vite | 6.x | | Tailwind CSS | 3.x | | PostCSS | 8.x | |