frontend-design

Name: frontend-design
Author: tobihagemann

3installs29forks

How to install frontend-design?

tobihagemann/turbo/frontend-design

$npx -y skills add tobihagemann/turbo --skill frontend-design

Installs into the current project.

Summary

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	Create distinctive, production-grade frontend interfaces that feel deliberate, premium, and current. Implement real working code with exceptional attention to aesthetic details and creative choices.
4
5	## Design Thinking
6
7	Before coding, understand the context and commit to a clear aesthetic direction.
8
9	Output three things as text before coding:
10
11	- Visual thesis: one sentence describing mood, material, and energy (e.g., "brutally minimal dark interface with surgical precision" or "warm editorial magazine feel with generous whitespace")
12	- Content plan: hero, support, detail, final CTA
13	- Interaction thesis: 2-3 motion ideas that change the feel of the page
14
15	For each, consider:
16
17	- Purpose: What problem does this interface solve? Who uses it?
18	- Tone: Pick a direction and commit. Brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial. These are starting points; design one true to the vision.
19	- Constraints: Framework, performance, accessibility requirements.
20	- Differentiation: What makes this unforgettable? What's the one thing someone remembers?
21
22	Match ambition to context. A brand landing page warrants bold, expressive choices. A dashboard warrants calm restraint. Both require intentionality.
23
24	Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is production-grade, visually striking, cohesive, and meticulously refined.
25
26	## Beautiful Defaults
27
28	- Start with composition, not components.
29	- Prefer a full-bleed hero or full-canvas visual anchor.
30	- Make the brand or product name the loudest text.
31	- Keep copy short enough to scan in seconds.
32	- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
33	- Limit the system: two typefaces max, one accent color by default.
34	- Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead.
35	- Treat the first viewport as a poster, not a document.
36	- Each section gets one job, one dominant visual idea, and one primary takeaway or action.
37
38	## Aesthetics
39
40	### Typography
41
42	Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Avoid generic fonts like Arial, Inter, Roboto, and system defaults. Never converge on common AI-favorite choices (Space Grotesk, for example) across generations.
43
44	### Color and Theme
45
46	Commit to a cohesive palette. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. One accent color unless the product already has a strong system.
47
48	### Spatial Composition
49
50	Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Match the spatial approach to the visual thesis.
51
52	### Backgrounds and Visual Details
53
54	Create atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. Match effects to the overall aesthetic.
55
56	## Motion
57
58	Use motion to create presence and hierarchy, not noise.
59
60	Ship at least 2-3 intentional motions for visually led work:
61
62	- One entrance sequence in the hero (staggered reveals with `animation-delay` create more delight than scattered micro-interactions)
63	- One scroll-linked, sticky, or depth effect
64	- One hover, reveal, or layout transition that sharpens affordance
65
66	Prefer CSS-only solutions for plain HTML. Use Framer Motion when available in React for section reveals, shared layout transitions, scroll-linked shifts, sticky storytelling, and presence effects.
67
68	Motion rules:
69
70	- Noticeable in a quick recording
71	- Smooth on mobile
72	- Fast and restrained
73	- Consistent across the page
74	- Removed if ornamental only
75	- Wrapped in `@media (prefers-reduced-motion: no-preference)` to respect accessibility settings
76
77	## Landing Pages
78
79	Default sequence:
80
81	1. Hero: brand or product, promise, CTA, and one dominant visual
82	2. Support: one concrete feature, offer, or proof point
83	3. Detail: atmosphere, workflow, product depth, or story
84	4. Final CTA: convert, start, visit, or contact
85
86	Hero rules:
87
88	- One composition only. Full-bleed image or dominant visual plane.
89	- On branded landing pages, the hero runs edge-to-edge with no inherited page gutters or shared max-width. Constrain only the inner text/action column.
90	- Brand first, headline second, body third, CTA fourth.
91	- No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default.
92	- Keep headlines to roughly 2-3 lines on desktop, readable in one glance

People who liked this also viewed

6 picks

Type

frontend-design

3installs29forks

View on GitHub

How to install frontend-design?

tobihagemann/turbo/frontend-design

$npx -y skills add tobihagemann/turbo --skill frontend-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	Create distinctive, production-grade frontend interfaces that feel deliberate, premium, and current. Implement real working code with exceptional attention to aesthetic details and creative choices.
4
5	## Design Thinking
6
7	Before coding, understand the context and commit to a clear aesthetic direction.
8
9	Output three things as text before coding:
10
11	- Visual thesis: one sentence describing mood, material, and energy (e.g., "brutally minimal dark interface with surgical precision" or "warm editorial magazine feel with generous whitespace")
12	- Content plan: hero, support, detail, final CTA
13	- Interaction thesis: 2-3 motion ideas that change the feel of the page
14
15	For each, consider:
16
17	- Purpose: What problem does this interface solve? Who uses it?
18	- Tone: Pick a direction and commit. Brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial. These are starting points; design one true to the vision.
19	- Constraints: Framework, performance, accessibility requirements.
20	- Differentiation: What makes this unforgettable? What's the one thing someone remembers?
21
22	Match ambition to context. A brand landing page warrants bold, expressive choices. A dashboard warrants calm restraint. Both require intentionality.
23
24	Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is production-grade, visually striking, cohesive, and meticulously refined.
25
26	## Beautiful Defaults
27
28	- Start with composition, not components.
29	- Prefer a full-bleed hero or full-canvas visual anchor.
30	- Make the brand or product name the loudest text.
31	- Keep copy short enough to scan in seconds.
32	- Use whitespace, alignment, scale, cropping, and contrast before adding chrome.
33	- Limit the system: two typefaces max, one accent color by default.
34	- Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead.
35	- Treat the first viewport as a poster, not a document.
36	- Each section gets one job, one dominant visual idea, and one primary takeaway or action.
37
38	## Aesthetics
39
40	### Typography
41
42	Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Avoid generic fonts like Arial, Inter, Roboto, and system defaults. Never converge on common AI-favorite choices (Space Grotesk, for example) across generations.
43
44	### Color and Theme
45
46	Commit to a cohesive palette. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. One accent color unless the product already has a strong system.
47
48	### Spatial Composition
49
50	Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. Match the spatial approach to the visual thesis.
51
52	### Backgrounds and Visual Details
53
54	Create atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. Match effects to the overall aesthetic.
55
56	## Motion
57
58	Use motion to create presence and hierarchy, not noise.
59
60	Ship at least 2-3 intentional motions for visually led work:
61
62	- One entrance sequence in the hero (staggered reveals with `animation-delay` create more delight than scattered micro-interactions)
63	- One scroll-linked, sticky, or depth effect
64	- One hover, reveal, or layout transition that sharpens affordance
65
66	Prefer CSS-only solutions for plain HTML. Use Framer Motion when available in React for section reveals, shared layout transitions, scroll-linked shifts, sticky storytelling, and presence effects.
67
68	Motion rules:
69
70	- Noticeable in a quick recording
71	- Smooth on mobile
72	- Fast and restrained
73	- Consistent across the page
74	- Removed if ornamental only
75	- Wrapped in `@media (prefers-reduced-motion: no-preference)` to respect accessibility settings
76
77	## Landing Pages
78
79	Default sequence:
80
81	1. Hero: brand or product, promise, CTA, and one dominant visual
82	2. Support: one concrete feature, offer, or proof point
83	3. Detail: atmosphere, workflow, product depth, or story
84	4. Final CTA: convert, start, visit, or contact
85
86	Hero rules:
87
88	- One composition only. Full-bleed image or dominant visual plane.
89	- On branded landing pages, the hero runs edge-to-edge with no inherited page gutters or shared max-width. Constrain only the inner text/action column.
90	- Brand first, headline second, body third, CTA fourth.
91	- No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default.
92	- Keep headlines to roughly 2-3 lines on desktop, readable in one glance

People who liked this also viewed

6 picks

Type