Skill

designing-systems

Phase 1: Browse 4 catalog sites via Playwright, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.

From fuse-design

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-design

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/breakpoint-patterns.md

references/color-mapping.md

references/color-system.md

references/complex-themes.md

references/container-queries.md

references/design-inspiration-urls.md

references/design-inspiration.md

references/edge-cases.md

references/fluid-typography.md

references/gradients-guide.md

references/image-handling.md

references/multi-brand.md

references/tailwind-config.md

references/tailwind-performance.md

references/tailwind-utilities.md

references/templates/responsive-dashboard.md

references/templates/responsive-mobile-nav.md

references/theme-presets.md

references/typography.md

references/ui-hierarchy.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.7k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

bmad-editorial-review-prose

Reviews prose for communication issues impeding comprehension, outputs minimal fixes in a three-column table per Microsoft Writing Style Guide. Useful for 'review prose' or 'improve prose' requests.

bmad-pro-skills

43.8k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 19, 2026

Actions

View Source View Plugin View on GitHub View README

Phase 1: RESEARCH — Browse, observe, extract CSS specs

When

After Phase 0 identity templates are read. Before writing design-system.md.

Input (from Phase 0)

Sector identified (creative/fintech/ecommerce/devtool/health)

Typography pair chosen, OKLCH palette direction known

Steps

Read inspiration catalog — references/design-inspiration.md + references/design-inspiration-urls.md

Pick 4 URLs from catalog matching the project sector (MUST be from KNOWN_DOMAINS)

Browse each site via Playwright:

browser_navigate → URL
browser_evaluate → window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})
Wait 5s → scroll back to top → wait 2s
browser_take_screenshot fullPage: true

Write 5 CSS-precise observations per screenshot (NOT vague descriptions):

(1) Colors: exact oklch() values for primary, accent, background, text
(2) Typography: font-family name, font-size as clamp(min, preferred, max), font-weight
(3) Layout: grid/flex structure with column ratios (60/40, 1fr/1fr), gap in px
(4) Effects: border-radius in px, box-shadow values, backdrop-blur, opacity
(5) Spacing: section padding in px, margin between elements, max-width

Declare reference — "Site choisi: {URL}. Je reproduis: {el1}, {el2}, {el3}" Pick 3 visually distinctive elements with their CSS specs.

Output

4 fullPage screenshots taken (state: screenshots_count >= 4)

20 CSS-precise observations (5 per site)

1 reference site declared with 3 elements to reproduce

Ready to write design-system.md (Phase 2)

Next → Phase 2: UX COPY

2-ux-copy/SKILL.md — Define voice, tone, and microcopy patterns.

References

File

Purpose

references/design-inspiration.md

Browsing methodology and observation format

references/design-inspiration-urls.md

Catalog of sector-matched inspiration URLs