design-system-reference

Name: design-system-reference
Author: wigtn

45stars2forks

How to install design-system-reference?

wigtn/wigtn-plugins/design-system-reference

$npx -y skills add wigtn/wigtn-plugins --skill design-system-reference

Installs into the current project.

Summary

Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.

Files · 1

View on GitHub

SKILL.md

1	# Design Implementation Guide
2
3	## Overview
4
5	This skill provides style guides and implementation rules for frontend design.
6
7	For design discovery and style selection, use the `design-discovery` agent which:
8	- Gathers context through step-by-step questions
9	- Uses VS (Verbalized Sampling) technique to recommend styles with suitability percentages
10	- Applies AIDA methodology for landing pages
11
12	This skill is automatically loaded after the agent completes discovery.
13
14	---
15
16	## How to Use
17
18	### With Discovery Agent (Recommended)
19	1. User requests frontend design
20	2. `design-discovery` agent conducts context gathering
21	3. Agent presents VS-based style recommendations
22	4. After style selection, agent loads this skill for implementation
23
24	### Direct Usage (Quick Mode)
25	If user already knows their style, skip discovery:
26	```
27	"Build me a landing page with Bento Grid style, dark theme, minimal animations"
28	```
29	In this case, directly read the relevant style guide and implement.
30
31	---
32
33	## Style Selection & Guidelines
34
35	Based on user responses, select the appropriate style and read the corresponding guide.
36
37	Read both the style guide and the relevant common modules before implementing.
38
39	### Available Style Guides
40
41	Use the `Read` tool to read the corresponding style file:
42	- Editorial → `styles/editorial.md`
43	- Brutalist → `styles/brutalist.md`
44	- Neobrutalism → `styles/neobrutalism.md`
45	- Glassmorphism → `styles/glassmorphism.md`
46	- Liquid Glass → `styles/liquid-glass.md`
47	- Swiss Minimal → `styles/swiss-minimal.md`
48	- Minimalism → `styles/minimalism.md`
49	- Neomorphism → `styles/neomorphism.md`
50	- Claymorphism → `styles/claymorphism.md`
51	- Skeuomorphism → `styles/skeuomorphism.md`
52	- Bento Grid → `styles/bento-grid.md`
53	- Dark Mode First → `styles/dark-mode-first.md`
54	- Minimal Corporate → `styles/minimal-corporate.md`
55	- Retro Pixel → `styles/retro-pixel.md`
56	- Organic Shapes → `styles/organic-shapes.md`
57	- Maximalist → `styles/maximalist.md`
58	- 3D Immersive → `styles/3d-immersive.md`
59	- Aurora / Gradient Mesh → `styles/aurora-gradient.md`
60	- Terminal / Hacker → `styles/terminal-hacker.md`
61	- Kinetic Typography → `styles/kinetic-typography.md`
62
63	### Common Modules (선택에 따라 참조)
64	- Colors → `common/colors.md` (color systems, palettes, dark mode)
65	- Animations → `common/animations.md` (motion principles, Tailwind animations)
66	- Spacing → `common/spacing.md` (density systems, responsive spacing)
67
68	Do NOT proceed to implementation without reading:
69	1. The chosen style guide
70	2. Relevant common modules based on user's detail choices
71
72	---
73
74	## Phase 3: Implementation
75
76	### Universal Principles
77
78	#### ❌ AI Slop 안티패턴 (피하기)
79	- Default fonts like Inter, Roboto, Arial, system-ui
80	- Purple gradient + white background combos
81	- Applying rounded-xl to everything
82	- Meaningless shadow spam
83	- Repetitive identical card components
84	- Using only Tailwind defaults
85	- Generic hero sections with stock images
86	- Overusing blur effects
87	- Inconsistent spacing
88
89	#### ✅ 지향
90	- Make intentional design decisions with clear reasoning
91	- Choose distinctive fonts that match the style (use Google Fonts)
92	- Create intentional color palettes (manage with CSS variables)
93	- Establish clear typography hierarchy (3-4 levels max)
94	- Use meaningful spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64)
95	- Apply details and finishing touches that match the chosen style
96	- Ensure contrast ratios meet WCAG AA (4.5:1 for text)
97	- Test responsive behavior at key breakpoints
98
99	---
100
101	## Style Quick Reference
102
103	\| Style \| Key Characteristics \| Example Fonts \| Color Traits \|
104	\|-------\|-------------------\|---------------\|--------------\|
105	\| Editorial \| Large type, intentional whitespace, asymmetry \| Playfair Display, Cormorant \| Monotone, single accent \|
106	\| Brutalist \| Raw, thick borders, rule-breaking \| Monument Extended, Archivo Black \| High contrast, primary colors \|
107	\| Neobrutalism \| Thick borders, hard shadows, playful colors \| Space Grotesk, Clash Display \| Vivid pastels, cheerful \|
108	\| Glassmorphism \| Blur, transparency, soft light \| SF Pro, Plus Jakarta Sans \| Pastel + white \|
109	\| Liquid Glass \| Dynamic refraction, specular highlights, alive \| SF Pro, Geist, Inter \| Environment-adaptive tints \|
110	\| Swiss Minimal \| Grid, typography-focused, refined \| Helvetica Neue, Suisse Int'l \| B&W + single accent \|
111	\| Minimalism \| Extreme whitespace, near-monochrome, zen \| Inter, Instrument Sans \| Near-absence of color \|
112	\| Organic \| Curves, blobs, natural flow \| Fraunces, DM Serif \| Earth tones, warm neutrals \|
113	\| Neomorphism \| Soft 3D, inset shadows, tactile \| Inter, Outfit \| Muted, low contrast \|
114	\| Claymorphism \| Puffy clay surfaces, inner highlights, pastel \| Nunito, Quicksand, Fredoka \| Warm pastels, c

People who liked this also viewed

6 picks

Type

design-system-reference

45stars2forks

View on GitHub

How to install design-system-reference?

wigtn/wigtn-plugins/design-system-reference

$npx -y skills add wigtn/wigtn-plugins --skill design-system-reference

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Implementation Guide
2
3	## Overview
4
5	This skill provides style guides and implementation rules for frontend design.
6
7	For design discovery and style selection, use the `design-discovery` agent which:
8	- Gathers context through step-by-step questions
9	- Uses VS (Verbalized Sampling) technique to recommend styles with suitability percentages
10	- Applies AIDA methodology for landing pages
11
12	This skill is automatically loaded after the agent completes discovery.
13
14	---
15
16	## How to Use
17
18	### With Discovery Agent (Recommended)
19	1. User requests frontend design
20	2. `design-discovery` agent conducts context gathering
21	3. Agent presents VS-based style recommendations
22	4. After style selection, agent loads this skill for implementation
23
24	### Direct Usage (Quick Mode)
25	If user already knows their style, skip discovery:
26	```
27	"Build me a landing page with Bento Grid style, dark theme, minimal animations"
28	```
29	In this case, directly read the relevant style guide and implement.
30
31	---
32
33	## Style Selection & Guidelines
34
35	Based on user responses, select the appropriate style and read the corresponding guide.
36
37	Read both the style guide and the relevant common modules before implementing.
38
39	### Available Style Guides
40
41	Use the `Read` tool to read the corresponding style file:
42	- Editorial → `styles/editorial.md`
43	- Brutalist → `styles/brutalist.md`
44	- Neobrutalism → `styles/neobrutalism.md`
45	- Glassmorphism → `styles/glassmorphism.md`
46	- Liquid Glass → `styles/liquid-glass.md`
47	- Swiss Minimal → `styles/swiss-minimal.md`
48	- Minimalism → `styles/minimalism.md`
49	- Neomorphism → `styles/neomorphism.md`
50	- Claymorphism → `styles/claymorphism.md`
51	- Skeuomorphism → `styles/skeuomorphism.md`
52	- Bento Grid → `styles/bento-grid.md`
53	- Dark Mode First → `styles/dark-mode-first.md`
54	- Minimal Corporate → `styles/minimal-corporate.md`
55	- Retro Pixel → `styles/retro-pixel.md`
56	- Organic Shapes → `styles/organic-shapes.md`
57	- Maximalist → `styles/maximalist.md`
58	- 3D Immersive → `styles/3d-immersive.md`
59	- Aurora / Gradient Mesh → `styles/aurora-gradient.md`
60	- Terminal / Hacker → `styles/terminal-hacker.md`
61	- Kinetic Typography → `styles/kinetic-typography.md`
62
63	### Common Modules (선택에 따라 참조)
64	- Colors → `common/colors.md` (color systems, palettes, dark mode)
65	- Animations → `common/animations.md` (motion principles, Tailwind animations)
66	- Spacing → `common/spacing.md` (density systems, responsive spacing)
67
68	Do NOT proceed to implementation without reading:
69	1. The chosen style guide
70	2. Relevant common modules based on user's detail choices
71
72	---
73
74	## Phase 3: Implementation
75
76	### Universal Principles
77
78	#### ❌ AI Slop 안티패턴 (피하기)
79	- Default fonts like Inter, Roboto, Arial, system-ui
80	- Purple gradient + white background combos
81	- Applying rounded-xl to everything
82	- Meaningless shadow spam
83	- Repetitive identical card components
84	- Using only Tailwind defaults
85	- Generic hero sections with stock images
86	- Overusing blur effects
87	- Inconsistent spacing
88
89	#### ✅ 지향
90	- Make intentional design decisions with clear reasoning
91	- Choose distinctive fonts that match the style (use Google Fonts)
92	- Create intentional color palettes (manage with CSS variables)
93	- Establish clear typography hierarchy (3-4 levels max)
94	- Use meaningful spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64)
95	- Apply details and finishing touches that match the chosen style
96	- Ensure contrast ratios meet WCAG AA (4.5:1 for text)
97	- Test responsive behavior at key breakpoints
98
99	---
100
101	## Style Quick Reference
102
103	\| Style \| Key Characteristics \| Example Fonts \| Color Traits \|
104	\|-------\|-------------------\|---------------\|--------------\|
105	\| Editorial \| Large type, intentional whitespace, asymmetry \| Playfair Display, Cormorant \| Monotone, single accent \|
106	\| Brutalist \| Raw, thick borders, rule-breaking \| Monument Extended, Archivo Black \| High contrast, primary colors \|
107	\| Neobrutalism \| Thick borders, hard shadows, playful colors \| Space Grotesk, Clash Display \| Vivid pastels, cheerful \|
108	\| Glassmorphism \| Blur, transparency, soft light \| SF Pro, Plus Jakarta Sans \| Pastel + white \|
109	\| Liquid Glass \| Dynamic refraction, specular highlights, alive \| SF Pro, Geist, Inter \| Environment-adaptive tints \|
110	\| Swiss Minimal \| Grid, typography-focused, refined \| Helvetica Neue, Suisse Int'l \| B&W + single accent \|
111	\| Minimalism \| Extreme whitespace, near-monochrome, zen \| Inter, Instrument Sans \| Near-absence of color \|
112	\| Organic \| Curves, blobs, natural flow \| Fraunces, DM Serif \| Earth tones, warm neutrals \|
113	\| Neomorphism \| Soft 3D, inset shadows, tactile \| Inter, Outfit \| Muted, low contrast \|
114	\| Claymorphism \| Puffy clay surfaces, inner highlights, pastel \| Nunito, Quicksand, Fredoka \| Warm pastels, c

People who liked this also viewed

6 picks

Type