no-code-frontend-builder

# Purpose Enable non-programmers to get production-grade frontend components from natural-language requirements. This meta-skill coordinates three upstream skills and produces implementation-ready output, usually as one `.tsx` file plus concise setup notes. It does not replace upstream skill logic and does not assume hidden dependencies are already installed. # Required Installed Skills - `frontend-design-ultimate` (inspected latest: `1.0.0`) - `shadcn-ui` (inspected latest: `1.0.0`) - `react-expert` (inspected latest: `0.1.0`) Install/update: ```bash npx -y clawhub@latest install frontend-design-ultimate npx -y clawhub@latest install shadcn-ui npx -y clawhub@latest install react-expert npx -y clawhub@latest update --all ``` Verify: ```bash npx -y clawhub@latest list ``` # OpenClaw Compatibility Notes This skill is written to match OpenClaw skill-loading rules: - `SKILL.md` with YAML frontmatter and Markdown body - single-line frontmatter keys - `metadata` encoded as a single-line JSON object - no unsupported custom top-level frontmatter keys If this file is edited later, keep those constraints intact. # Runtime Prerequisites Minimum local stack: - Node.js 18+ - npm - React + TypeScript project with Tailwind configured Adjacent ecosystem dependencies (from inspected upstream skill content): - `tailwindcss` (layout/styling baseline) - `lucide-react` (icons used by many shadcn examples) - `next-themes` (theme toggle patterns in shadcn guidance) - `react-hook-form`, `zod`, `@hookform/resolvers` (form patterns) - optional: `framer-motion` (motion patterns from frontend-design-ultimate) - optional: `recharts` or equivalent if a real chart package is required If user wants shadcn components and they are missing, include explicit setup commands in output: ```bash npx shadcn@latest init npx shadcn@latest add card button badge tabs table sheet sidebar ``` Do not assume Next.js unless the user says Next.js. Default to framework-agnostic React `.tsx` output that can run in Vite or Next.js with minimal adaptation. # Inputs the LM Must Collect First - `ui_goal` (dashboard, landing page, admin panel, etc.) - `theme_mode` (`dark`, `light`, or `system`) - `primary_metrics` (for example revenue, MRR, growth) - `chart_expectation` (line, bar, area; static or interactive) - `layout_density` (`compact`, `balanced`, `spacious`) - `brand_constraints` (colors, logo, typography constraints) - `target_framework` (`vite-react`, `nextjs`, or `generic-react`) - `single_file_strict` (`true`/`false`) If any critical input is missing, make explicit defaults and state them in `Assumptions`. # Tool Responsibilities ## frontend-design-ultimate Use for visual direction and anti-generic design decisions: - choose strong aesthetic direction - define typographic hierarchy and color system - enforce mobile-first responsiveness - avoid boilerplate “AI-slop” layouts From inspected upstream guidance: - commit to one clear tone - include an unforgettable visual element - prefer CSS variables and strong contrast - avoid generic default fonts ## shadcn-ui Use for robust UI primitives and composition patterns: - cards, tabs, sheets, navigation, table, badges, dialogs - theming conventions and dark mode compatibility - predictable component structure for fast shipping From inspected upstream guidance: - components are copied into the project (not a hosted runtime UI SDK) - include install commands for any components you reference - prefer composable primitives for layout and data display ## react-expert Use for behavioral correctness and maintainability: - state design and data flow - strict TypeScript-first component patterns - accessibility and predictable rendering behavior - optional performance hardening for non-trivial UI From inspected upstream guidance: - avoid state mutation and unstable keys - use semantic structure and cleanup in effects - ship clear typed interfaces for props/data # Canonical Causal Chain Use this exact orchestration order. 1. `Requirement Parse` - Normalize user request into goals, constraints, and output contract. 2. `Design Direction (frontend-design-ultimate)` - Select one explicit aesthetic mode. - Define palette, type scale, spacing, and page composition. - Decide dark-mode token strategy. 3. `Component Architecture (shadcn-ui)` - Map UI blocks to component primitives (sidebar, card, tabs, table, badge). - Declare required shadcn installs for referenced primitives. 4. `React Glue Logic (react-expert)` - Implement typed data models and render loops. - Add local state/hooks where required. - Keep logic simple and deterministic for copy-paste usability. 5. `Output Assembly` - Produce one `.tsx` file by default. - Include short `Setup` section with required install commands. - Include `Assumptions` and `Adaptation Notes`. # Output Contract Default output must contain: - `Setup`: - exact npm/npx commands for missing dependencies - shadcn component add commands used by generated code - `Single TSX File`: - one self-contained React component in TypeScript - imports listed at top - mock data included inline unless user supplies real data source - `Assumptions`: - explicit defaults chosen due to missing input - `Adaptation Notes`: - where to plug in real API data - which imports to remove if a component is unavailable No auxiliary script generation. No multi-file scaffolding unless user explicitly asks. # Chart Handling Rule If chart library is not guaranteed in target project: - default to a semantic “chart-ready” card layout with placeholders, or - use lightweight inline SVG chart logic in the same `.tsx`. Do not hallucinate unavailable chart components. If using external chart lib (for example Recharts), include install command and clearly label as optional. # Scenario Mapping: Revenue Dashboard (Dark Mode) For scenario: "I need a dark-mode dashboard showing revenue metrics" Execution: 1. frontend-design-ultimate defines dark palette, bold typography, and dashboard composition (sidebar + metric grid + chart area). 2. shadcn-ui maps layout to `Card`, `Badge`, `Tabs`, optional `Sidebar` primitives. 3. react-expert creates typed metric arrays and rendering loops for KPI tiles + trend view. 4. final output returns one production-usable `.tsx` component plus setup commands. # Quality Gates Before finalizing output, ensure: - component compiles as TSX (no missing symbols in emitted code) - design is intentional, not default-template generic - dark mode tokens are coherent and readable - mobile behavior is included (`sm/md/lg` responsive strategy) - all referenced UI components are listed in setup commands - no fake API calls presented as real integrations If any gate fails, return `Needs Revision` with a concrete missing-items list. # Guardrails - Never claim “works out of the box” without listing dependency assumptions. - Never emit components from libraries not declared in setup. - Never hide unresolved decisions (state them under `Assumptions`). - Prefer one high-quality component over broad but shallow scaffolding. # Failure Handling - Missing upstream skills: stop and report exact missing skills. - Missing project context: output generic React version and mark adaptation points. - Missing chart dependency: provide fallback rendering path and optional install command. - Conflicting constraints (for example “single file” + “full app routing”): prioritize single-file contract and document tradeoff.