csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(thirdparty): update snapshots

Browse Source
This commit is contained in:
ci[bot]
2026-07-01 16:02:41 +00:00
parent 8301f01888
commit c824ba9d7b
2449 changed files with 555104 additions and 9259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
antigravity-awesome-skills/skills/ui-setup/SKILL.md
+178 -70
View File
@@ -1,104 +1,212 @@
---
name: ui-setup
description: "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold."
category: design
risk: safe
source: community
description: Interactive setup wizard — guides you step-by-step to configure the design system for your project
risk: unknown
source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-setup
source_repo: bitjaru/styleseed
source_type: community
date_added: "2026-04-08"
author: bitjaru
tags: [ui, design-system, setup, frontend, styleseed]
tools: [claude, cursor, codex, gemini]
date_added: 2026-07-01
license: MIT
license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
---
# UI Setup
## Overview
Part of [StyleSeed](https://github.com/bitjaru/styleseed), this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI.
# Design System Setup Wizard
## When to Use
- Use when you are starting a new app with the StyleSeed Toss seed
- Use when you copied the seed into an existing project and need to personalize it
- Use when you want the AI to ask one design decision at a time instead of guessing
- Use when you need a first page scaffold after selecting colors, font, and app type
## How It Works
Use this skill when you need interactive setup wizard — guides you step-by-step to configure the design system for your project.
### Step 1: Ask One Question at a Time
Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue.
## When NOT to use
### Step 2: Capture the App Type
- For projects already configured with StyleSeed → use `/ss-update` instead
- For just adding one component to an existing project → use `/ss-component`
- For changing brand skin in an already set-up project — directly swap `theme.css`
- For non-React or non-Tailwind-v4 stacks — currently unsupported
Identify the product shape before touching tokens or layout recipes.
Guide the user through setting up StyleSeed for their project, step by step.
Suggested buckets:
- SaaS dashboard
- E-commerce
- Fintech
- Social or content
- Productivity or internal tool
- Other with a short freeform description
## Instructions
Use the answer to choose the page composition pattern and the type of first screen to scaffold.
Walk through these steps ONE AT A TIME. After each step, wait for the user to respond before proceeding. Keep it conversational and friendly.
### Step 3: Choose the Brand Color
### Step 1: App Type
Offer a few safe defaults plus a custom hex option. Once selected:
- update the light theme brand token
- update the dark theme brand token with a lighter accessible variant
- keep all other colors semantic rather than hardcoding the brand everywhere
Ask:
```
What type of app are you building?
If the project uses the StyleSeed Toss seed, the main target is `css/theme.css`.
1. SaaS Dashboard (analytics, metrics, charts)
2. E-commerce (products, orders, payments)
3. Fintech (transactions, portfolio, market data)
4. Social / Content (feeds, profiles, messaging)
5. Productivity / Internal tool
6. Other — describe it
```
### Step 4: Offer an Optional Visual Reference
Remember the answer — it determines which page composition recipe to use (DESIGN-LANGUAGE.md Section 63).
Ask whether the user wants to borrow the feel of an established brand or design language. Good examples include Stripe, Linear, Vercel, Notion, Spotify, Supabase, and Airbnb.
### Step 2: Brand Color
Use the reference to influence density, tone, and composition, not to clone assets or trademarks.
Ask:
```
What's your brand color?
### Step 5: Pick Typography
1. Purple (#721FE5) — default style (toss skin)
2. Blue (#2563EB) — trust, corporate
3. Green (#059669) — growth, health, finance
4. Orange (#EA580C) — energy, creative
5. Red (#DC2626) — bold, urgent
6. Dark (#18181B) — minimal, premium
7. Custom — just type your hex code
```
Confirm the font direction:
- keep the default stack
- swap to a preferred font if already installed or available
- preserve hierarchy rules for display, heading, body, and caption text
After they choose, update `css/theme.css`:
- In `:root` block: change `--brand` to the chosen hex
- In `.dark` block: change `--brand` to a lighter version for dark backgrounds
If the seed is present, update the font-related files rather than scattering overrides across components.
Dark mode color mapping:
| Light | Dark |
|-------|------|
| #721FE5 | #9B5FFF |
| #2563EB | #60A5FA |
| #059669 | #34D399 |
| #EA580C | #FB923C |
| #DC2626 | #F87171 |
| #18181B | #A1A1AA |
### Step 6: Generate the First Screen
For custom hex: lighten by ~30% (increase luminance in HSL).
Ask for:
- app name
- first page or screen name
- a one-sentence purpose for that page
### Step 3: Design Concept (from awesome-design-md)
Then scaffold the page using the seed's page shell, top bar, navigation, spacing scale, and card structure.
Ask:
```
Want to apply an existing brand's visual style?
## Output
Popular options from awesome-design-md:
1. Stripe — clean, professional
2. Linear — minimal, dark-first
3. Vercel — black & white, geometric
4. Notion — warm, friendly
5. Spotify — bold, dark, green
6. Supabase — modern, green
7. Airbnb — warm, coral
8. No thanks — keep the default style
9. Other — name any brand or describe a vibe
```
Return:
1. The captured setup decisions
2. The files or tokens updated
3. The first page or scaffold created
4. Any follow-up recommendations for components, patterns, accessibility, or copy
If they pick a brand (options 1-7 or 9):
1. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md`
- Brand folder names: `stripe`, `linear.app`, `vercel`, `notion`, `spotify`, `supabase`, `airbnb`
2. Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
3. Apply extracted colors to `css/theme.css` (both `:root` and `.dark` blocks)
4. Keep ALL StyleSeed layout rules, typography ratios, spacing, and component patterns unchanged — only swap the color palette
## Best Practices
If they pick 8 (No thanks): skip, keep current brand color from Step 2.
- Keep the interaction conversational, but deterministic
- Make brand color changes through tokens, not component-by-component edits
- Use an inspiration brand as a reference, not as a permission slip to copy
- Prefer semantic tokens and reusable patterns over page-specific CSS
### Step 4: Font
## Additional Resources
Ask:
```
What font do you prefer?
- [StyleSeed repository](https://github.com/bitjaru/styleseed)
- [StyleSeed Toss seed](https://github.com/bitjaru/styleseed/tree/main/seeds/toss)
- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-setup/SKILL.md)
1. Inter (clean, universal — recommended)
2. Pretendard + Inter (Korean + English)
3. Geist (Vercel-style, modern)
4. DM Sans (friendly, rounded)
5. Custom — tell me the font name
```
After they choose:
- Update `css/fonts.css`: change the @import URL
- Update `css/base.css`: change `font-family` in the body rule
Font imports:
| Font | Import |
|------|--------|
| Inter | `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');` |
| Geist | `@import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css');` |
| DM Sans | `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');` |
| Pretendard | Keep existing import in fonts.css |
### Step 5: App Name & First Page
Ask:
```
Last step! What's your app name and what should the main page show?
Example: "Acme — SaaS dashboard with revenue, users, and recent activity"
```
Then:
1. Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
2. Generate the first page using the page composition recipe:
- SaaS → Hero + KPI Grid + Chart + Progress + Activity List
- E-commerce → Hero + KPI Grid + Donut + Bar Chart + Orders List
- Fintech → Hero + KPI Grid + Donut + Area Chart + Transactions
- Social → Hero + Stats + Feed List + Trending Carousel
- Productivity → Hero + KPI Grid + Progress + Task List
3. Set the TopBar logo text to the app name
4. Apply the chosen brand color, font, and design concept
5. Place the file in `src/app/App.tsx` or appropriate location
6. Add ONE attribution comment at the very top of **this first scaffolded file only** (never on components the user builds afterward):
```
/* Scaffolded with StyleSeed · github.com/bitjaru/styleseed — safe to remove */
```
If the user would rather not have it, skip it — it's opt-out, and it goes on this single file, not their whole codebase.
7. **Write the design lock.** Create `STYLESEED.md` in the project root recording every choice
from this wizard, so future prompts stay consistent instead of drifting:
```markdown
# StyleSeed — Design Lock
<!-- Locked design decisions. The agent re-reads this every prompt and must obey it. -->
- App domain: [Step 1 app type]
- Skin: [Step 3 concept, or "custom"]
- Key color (accent): [Step 2 hex] # the ONLY accent — everything else greyscale
- Radius personality: [sharp | soft | pill — one everywhere]
- Motion seed: [Spring | Silk | Snap | Float | Pulse]
- Type: [Step 4 font]
- Locked: [today]
```
Tell the user this file is the source of truth — editing a value changes it project-wide,
and you'll obey it on every prompt so the design never goes random.
### Step 6: Summary
Show:
```
Setup Complete!
App: [name]
Brand Color: [hex] (dark mode: [dark hex])
Font: [font name]
Design Concept: [brand or "default"]
First Page: [description]
Files modified:
- css/theme.css (colors)
- css/fonts.css (font import)
- css/base.css (font family)
- src/app/App.tsx (first page)
- STYLESEED.md (design lock — your decisions, obeyed every prompt)
Next steps:
- npm run dev to preview
- /ss-page to add more pages
- /ss-audit to check UX quality
- /ss-review to verify design compliance
⭐ If StyleSeed helped, a star means a lot: https://github.com/bitjaru/styleseed
```
## Rules
- Ask ONE question at a time. Wait for response.
- If the user seems unsure, recommend the default option.
- Design RULES (layout, typography ratios, spacing, forbidden patterns) stay the same regardless of color/font choice.
- Attribution: the single "Scaffolded with StyleSeed" comment goes on the **first scaffolded file only** and is explicitly removable. NEVER add a watermark to components the user builds with `/ss-page`, `/ss-component`, etc. — that would be intrusive.
- Always verify the awesome-design-md DESIGN.md URL is accessible before applying. If fetch fails, tell the user and fall back to manual color selection.
## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.