frontend-design

Name: frontend-design
Author: waterfeet

22stars3forks

How to install frontend-design?

waterfeet/doropet_v3/frontend-design

$npx -y skills add waterfeet/DoroPet_V3 --skill frontend-design

Installs into the current project.

Summary

Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when buildin

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design Ultimate
2
3	Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.
4
5	Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
6	Output: Vite (static HTML) or Next.js (Vercel-ready)
7
8	## Quick Start
9
10	```
11	"Build a SaaS landing page for an AI writing tool. Dark theme,
12	editorial typography, subtle grain texture. Pages: hero with
13	animated demo, features grid, pricing table, FAQ accordion, footer."
14	```
15
16	---
17
18	## Design Thinking (Do This First)
19
20	Before writing any code, commit to a BOLD aesthetic direction:
21
22	### 1. Understand Context
23	- Purpose: What problem does this interface solve? Who uses it?
24	- Audience: Developer tools? Consumer app? Enterprise? Creative agency?
25	- Constraints: Performance requirements, accessibility needs, brand guidelines?
26
27	### 2. Choose an Extreme Tone
28	Pick ONE and commit fully — timid designs fail:
29
30	\| Tone \| Characteristics \|
31	\|------\|-----------------\|
32	\| Brutally Minimal \| Sparse, monochrome, massive typography, raw edges \|
33	\| Maximalist Chaos \| Layered, dense, overlapping elements, controlled disorder \|
34	\| Retro-Futuristic \| Neon accents, geometric shapes, CRT aesthetics \|
35	\| Organic/Natural \| Soft curves, earth tones, hand-drawn elements \|
36	\| Luxury/Refined \| Subtle animations, premium typography, restrained palette \|
37	\| Editorial/Magazine \| Strong grid, dramatic headlines, whitespace as feature \|
38	\| Brutalist/Raw \| Exposed structure, harsh contrasts, anti-design \|
39	\| Art Deco/Geometric \| Gold accents, symmetry, ornate patterns \|
40	\| Soft/Pastel \| Rounded corners, gentle gradients, friendly \|
41	\| Industrial/Utilitarian \| Functional, monospace, data-dense \|
42
43	### 3. Define the Unforgettable Element
44	What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?
45
46	---
47
48	## Aesthetics Guidelines
49
50	### Typography — NEVER Generic
51
52	BANNED: Inter, Roboto, Arial, system fonts, Open Sans
53
54	DO: Distinctive, characterful choices that elevate the design.
55
56	\| Use Case \| Approach \|
57	\|----------\|----------\|
58	\| Display/Headlines \| Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display \|
59	\| Body Text \| Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans \|
60	\| Monospace/Code \| DM Mono, JetBrains Mono, IBM Plex Mono \|
61	\| Pairing Strategy \| Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) \|
62
63	Size Progression: Use 3x+ jumps, not timid 1.5x increments.
64
65	### Color & Theme
66
67	BANNED: Purple gradients on white, evenly-distributed 5-color palettes
68
69	DO:
70	- Dominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent)
71	- CSS Variables: `--primary`, `--accent`, `--surface`, `--text`
72	- Commit to dark OR light: Don't hedge with gray middle-grounds
73	- High contrast CTAs: Buttons should pop dramatically
74
75	```css
76	:root {
77	--bg-primary: #0a0a0a;
78	--bg-secondary: #141414;
79	--text-primary: #fafafa;
80	--text-secondary: #a1a1a1;
81	--accent: #ff6b35;
82	--accent-hover: #ff8555;
83	}
84	```
85
86	### Motion & Animation
87
88	Priority: One orchestrated page load > scattered micro-interactions
89
90	High-Impact Moments:
91	- Staggered hero reveals (`animation-delay`)
92	- Scroll-triggered section entrances
93	- Hover states that surprise (scale, color shift, shadow depth)
94	- Smooth page transitions
95
96	Implementation:
97	- CSS-only for simple animations
98	- Framer Motion for React (pre-installed via init scripts)
99	- Keep durations 200-400ms (snappy, not sluggish)
100
101	### Spatial Composition
102
103	BANNED: Centered, symmetrical, predictable layouts
104
105	DO:
106	- Asymmetry with purpose
107	- Overlapping elements
108	- Diagonal flow / grid-breaking
109	- Generous negative space OR controlled density (pick one)
110	- Off-grid hero sections
111
112	### Backgrounds & Atmosphere
113
114	BANNED: Solid white/gray backgrounds
115
116	DO:
117	- Gradient meshes (subtle, not garish)
118	- Noise/grain textures (SVG filter or CSS)
119	- Geometric patterns (dots, lines, shapes)
120	- Layered transparencies
121	- Dramatic shadows for depth
122	- Blur effects for glassmorphism
123
124	```css
125	/* Subtle grain overlay */
126	.grain::before {
127	content: '';
128	position: fixed;
129	inset: 0;
130	background: url("data:image/svg+xml,...") repeat;
131	opacity: 0.03;

People who liked this also viewed

6 picks

Type

frontend-design

22stars3forks

View on GitHub

How to install frontend-design?

waterfeet/doropet_v3/frontend-design

$npx -y skills add waterfeet/DoroPet_V3 --skill frontend-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design Ultimate
2
3	Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.
4
5	Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
6	Output: Vite (static HTML) or Next.js (Vercel-ready)
7
8	## Quick Start
9
10	```
11	"Build a SaaS landing page for an AI writing tool. Dark theme,
12	editorial typography, subtle grain texture. Pages: hero with
13	animated demo, features grid, pricing table, FAQ accordion, footer."
14	```
15
16	---
17
18	## Design Thinking (Do This First)
19
20	Before writing any code, commit to a BOLD aesthetic direction:
21
22	### 1. Understand Context
23	- Purpose: What problem does this interface solve? Who uses it?
24	- Audience: Developer tools? Consumer app? Enterprise? Creative agency?
25	- Constraints: Performance requirements, accessibility needs, brand guidelines?
26
27	### 2. Choose an Extreme Tone
28	Pick ONE and commit fully — timid designs fail:
29
30	\| Tone \| Characteristics \|
31	\|------\|-----------------\|
32	\| Brutally Minimal \| Sparse, monochrome, massive typography, raw edges \|
33	\| Maximalist Chaos \| Layered, dense, overlapping elements, controlled disorder \|
34	\| Retro-Futuristic \| Neon accents, geometric shapes, CRT aesthetics \|
35	\| Organic/Natural \| Soft curves, earth tones, hand-drawn elements \|
36	\| Luxury/Refined \| Subtle animations, premium typography, restrained palette \|
37	\| Editorial/Magazine \| Strong grid, dramatic headlines, whitespace as feature \|
38	\| Brutalist/Raw \| Exposed structure, harsh contrasts, anti-design \|
39	\| Art Deco/Geometric \| Gold accents, symmetry, ornate patterns \|
40	\| Soft/Pastel \| Rounded corners, gentle gradients, friendly \|
41	\| Industrial/Utilitarian \| Functional, monospace, data-dense \|
42
43	### 3. Define the Unforgettable Element
44	What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout?
45
46	---
47
48	## Aesthetics Guidelines
49
50	### Typography — NEVER Generic
51
52	BANNED: Inter, Roboto, Arial, system fonts, Open Sans
53
54	DO: Distinctive, characterful choices that elevate the design.
55
56	\| Use Case \| Approach \|
57	\|----------\|----------\|
58	\| Display/Headlines \| Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display \|
59	\| Body Text \| Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans \|
60	\| Monospace/Code \| DM Mono, JetBrains Mono, IBM Plex Mono \|
61	\| Pairing Strategy \| Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) \|
62
63	Size Progression: Use 3x+ jumps, not timid 1.5x increments.
64
65	### Color & Theme
66
67	BANNED: Purple gradients on white, evenly-distributed 5-color palettes
68
69	DO:
70	- Dominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent)
71	- CSS Variables: `--primary`, `--accent`, `--surface`, `--text`
72	- Commit to dark OR light: Don't hedge with gray middle-grounds
73	- High contrast CTAs: Buttons should pop dramatically
74
75	```css
76	:root {
77	--bg-primary: #0a0a0a;
78	--bg-secondary: #141414;
79	--text-primary: #fafafa;
80	--text-secondary: #a1a1a1;
81	--accent: #ff6b35;
82	--accent-hover: #ff8555;
83	}
84	```
85
86	### Motion & Animation
87
88	Priority: One orchestrated page load > scattered micro-interactions
89
90	High-Impact Moments:
91	- Staggered hero reveals (`animation-delay`)
92	- Scroll-triggered section entrances
93	- Hover states that surprise (scale, color shift, shadow depth)
94	- Smooth page transitions
95
96	Implementation:
97	- CSS-only for simple animations
98	- Framer Motion for React (pre-installed via init scripts)
99	- Keep durations 200-400ms (snappy, not sluggish)
100
101	### Spatial Composition
102
103	BANNED: Centered, symmetrical, predictable layouts
104
105	DO:
106	- Asymmetry with purpose
107	- Overlapping elements
108	- Diagonal flow / grid-breaking
109	- Generous negative space OR controlled density (pick one)
110	- Off-grid hero sections
111
112	### Backgrounds & Atmosphere
113
114	BANNED: Solid white/gray backgrounds
115
116	DO:
117	- Gradient meshes (subtle, not garish)
118	- Noise/grain textures (SVG filter or CSS)
119	- Geometric patterns (dots, lines, shapes)
120	- Layered transparencies
121	- Dramatic shadows for depth
122	- Blur effects for glassmorphism
123
124	```css
125	/* Subtle grain overlay */
126	.grain::before {
127	content: '';
128	position: fixed;
129	inset: 0;
130	background: url("data:image/svg+xml,...") repeat;
131	opacity: 0.03;

People who liked this also viewed

6 picks

Type