design-webapp

Solid

Use when building or extending a dashboard, SaaS screen, or any authenticated app surface — use design-web instead for a marketing site.

Web & Frontend 25 stars 4 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
47
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<objective> Builds logged-in web apps under register `product` — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Optimizes for density and glance-speed over marketing polish: no hero, no scroll-reveal, no CTA-tricks. Requires every data surface to explicitly cover empty, loading, and error states (never a silent blank default), and applies preattentive-processing rules to tables and dataviz (right-aligned numbers, sticky headers, bar/line over pie, consistent category-to-color mapping). Reuses `design-web`'s general component guides (buttons, cards, grids, icons) rather than duplicating them — this skill only adds what's specific to apps. Sources craft from the local corpus's two application interfaces (`reve`, `linear`) — no sector browsing — and declares the three reproduced elements (`Je reproduis`) that `design-review` verdicts. </objective> ## Design Webapp — Dashboards, Density, States ### When After `design-system` tokens exist and `design-method`'s Gate 0 has locked register `product` (dense, predictable, motion stays discreet). Read `design-method`'s routing table first — if the surface is a marketing/landing page instead, use `design-web`. ### Input - `design-system.md` — OKLCH palette, typography, spacing density, the 3 dials. - `design-method/references/register/product.md` — the Domain-Specificity Floor and the Product Furniture table (generic KPI ribbon, marketing triad reused in-app, cookie-cutter empty sta...

Details

Author
fusengine
Repository
fusengine/agents
Created
8 months ago
Last Updated
6 days ago
Language
CSS
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-web

Use when building or revising a marketing/landing/campaign page, register `brand` locked at Gate 0 — use design-webapp for app screens instead.

25 Updated 6 days ago
fusengine
Web & Frontend Listed

design-interface

Design, implement, redesign, or visually review production-quality websites, apps, dashboards, flows, pages, and UI components. Use when visual direction, usability, responsive behavior, accessibility, interaction states, information hierarchy, or design-system fit materially affect the result, especially when extending an existing product without breaking its visual language. Do not use for backend-only work, mechanical CSS edits with no design judgment, or non-interface artifacts.

4 Updated 2 days ago
dayfinggg
Web & Frontend Listed

design-md-to-app

Generate or customize a frontend app from a DESIGN.md (Google design.md spec): reads its tokens and produces a working React app pre-styled to match. Next.js 16 + App Router only; pre-16 refused. Four UI libraries — shadcn/ui, Base UI, MUI, Coss/UI (via `coss-ui`) — and TanStack Form + Zod (default) or react-hook-form. Bumps phase to `scaffolded`. Use when the user has a DESIGN.md and wants to scaffold an app, set up a theme, or customize shadcn / Base UI / MUI from its tokens: "use this DESIGN.md to start an app", "DESIGN.md → app", "scaffold from design.md", "applica il DESIGN.md a shadcn / Base UI / MUI", "crea l'app dal DESIGN.md", "init shadcn con questo DESIGN.md". Not for: mobile apps (use rn-bootstrap), writing PRDs (use prd-from-idea), or generating pages after the scaffold exists (use screenshot-to-page).

6 Updated today
lukedj78