web-design

Name: web-design
Author: f0d010c

19stars0forks

How to install web-design?

f0d010c/stark/web-design

$npx -y skills add f0d010c/stark --skill web-design

Installs into the current project.

Summary

Use for websites, web apps, landing pages, dashboards, SaaS products, docs, checkout, agent/tool runs, React/Next/Vite/Astro/Tailwind frontends, web UI reference planning, originality, typography, assets, animation, motion, scrolling, GSAP, Motion, Lenis, View Transitions, comman

Files · 1

View on GitHub

SKILL.md

1	# web-design — pick the direction first, then execute precisely
2
3	Goal: build web surfaces that feel specific, useful, and visually deliberate. Marketing pages can chase an Awwwards-level ceiling; dashboards, editors, docs, checkout, and agent-run UIs should prioritize product proof, scan speed, state coverage, and stable interaction before spectacle.
4
5	## What This Skill Can Do
6
7	- Design landing pages, SaaS dashboards, docs, checkout, product proof pages, editor/canvas tools, and agent-run UIs.
8	- Choose between static HTML/CSS/JS, Vite React, Next, Astro, or the existing stack based on interaction needs.
9	- Plan originality, concept seed, composition, typography, layout sketch, copy voice, asset system, and responsive containment.
10	- Choose motion/library techniques such as CSS, Motion, GSAP ScrollTrigger, View Transitions, native scroll CSS, Lenis, or no motion.
11	- Audit and repair generic AI web patterns like centered hero/three cards, static bento, decorative dashboards, and over-animation.
12
13	## Step 0 (MANDATORY) — Choose surface type, then direction
14
15	Before aesthetic direction, classify the surface using `../../references/ui-patterns/surface-taxonomy.md`:
16
17	- Marketing page
18	- Cinematic campaign page
19	- Editorial scroll story
20	- Product proof landing page
21	- Immersive brand page
22	- SaaS dashboard
23	- Editor/canvas
24	- Checkout/upgrade
25	- Agent/tool run
26	- Mobile task flow
27
28	Then write the `UI decision brief` from `../../references/ui-patterns/ui-decision-brief.md`. For dashboards, editors, checkouts, and agent-run UIs, preserve the UX decision brief if one exists and bias toward usable density over Awwwards spectacle.
29
30	For original, distinctive, memorable, non-generic, creative, polished, high-craft, or "actually designed" web requests, read `../../references/ui-patterns/originality-engine.md` before picking the final visual system. Produce a concept seed, choose a composition archetype, name one weird move and restraints, ban the obvious skeleton for this specific brief, and generate the three-direction fork when the user has not already supplied a strong concept. The chosen concept must survive into layout and interaction; do not reduce originality to colors, gradients, or typeface choice.
31
32	For higher-quality web work, read `../../references/ui-patterns/design-recipes.md` and output a compact layout sketch before code. If the layout starts to resemble centered hero + three features + CTA, static bento, or generic dashboard cards, read `../../references/ui-patterns/anti-default-contrasts.md` and replace the skeleton with product proof, timeline, trust matrix, comparison, command deck, or another product-specific structure.
33
34	For polished, original, memorable, high-craft, campaign, or "best-looking" requests, read `../../references/ui-patterns/creative-direction.md` before visual styling. Define a creative direction brief with world, metaphor, material language, typography personality, layout grammar, repeated motif, forbidden defaults, one tasteful risk, and restraints.
35
36	For cinematic campaign, editorial scroll story, product proof, or immersive brand pages, read `../../references/ui-patterns/cinematic-landing-system.md` before choosing motion. Define key art, art direction, typography discipline, section rhythm, and page choreography first. Motion should reveal the system, not compensate for weak composition.
37
38	Do not force an expressive landing-page composition onto a repeated-use web app. For operational surfaces, read `../../references/ui-patterns/product-quality-bar.md`, `../../references/ui-patterns/visual-hierarchy.md`, `../../references/ui-patterns/responsive-containment.md`, `../../references/ui-patterns/motion-budget.md`, `../../references/ui-patterns/interaction-techniques.md`, and `../../references/ui-patterns/ui-audit-rubric.md` before coding.
39
40	When the site needs imagery, proof visuals, icons, screenshots, typography, or references, also read `../../references/ui-patterns/asset-selection.md` and include an asset plan before code. If the user is using GPT/Codex and image generation is available, generated bitmap assets are allowed for fictional product visuals, editorial hero imagery, textures, and empty states when they support the product job.
41
42	When using shipped products, Mobbin/Figma screens, docs, or screenshots as refer

People who liked this also viewed

6 picks

Type

web-design

19stars0forks

View on GitHub

How to install web-design?

f0d010c/stark/web-design

$npx -y skills add f0d010c/stark --skill web-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# web-design — pick the direction first, then execute precisely
2
3	Goal: build web surfaces that feel specific, useful, and visually deliberate. Marketing pages can chase an Awwwards-level ceiling; dashboards, editors, docs, checkout, and agent-run UIs should prioritize product proof, scan speed, state coverage, and stable interaction before spectacle.
4
5	## What This Skill Can Do
6
7	- Design landing pages, SaaS dashboards, docs, checkout, product proof pages, editor/canvas tools, and agent-run UIs.
8	- Choose between static HTML/CSS/JS, Vite React, Next, Astro, or the existing stack based on interaction needs.
9	- Plan originality, concept seed, composition, typography, layout sketch, copy voice, asset system, and responsive containment.
10	- Choose motion/library techniques such as CSS, Motion, GSAP ScrollTrigger, View Transitions, native scroll CSS, Lenis, or no motion.
11	- Audit and repair generic AI web patterns like centered hero/three cards, static bento, decorative dashboards, and over-animation.
12
13	## Step 0 (MANDATORY) — Choose surface type, then direction
14
15	Before aesthetic direction, classify the surface using `../../references/ui-patterns/surface-taxonomy.md`:
16
17	- Marketing page
18	- Cinematic campaign page
19	- Editorial scroll story
20	- Product proof landing page
21	- Immersive brand page
22	- SaaS dashboard
23	- Editor/canvas
24	- Checkout/upgrade
25	- Agent/tool run
26	- Mobile task flow
27
28	Then write the `UI decision brief` from `../../references/ui-patterns/ui-decision-brief.md`. For dashboards, editors, checkouts, and agent-run UIs, preserve the UX decision brief if one exists and bias toward usable density over Awwwards spectacle.
29
30	For original, distinctive, memorable, non-generic, creative, polished, high-craft, or "actually designed" web requests, read `../../references/ui-patterns/originality-engine.md` before picking the final visual system. Produce a concept seed, choose a composition archetype, name one weird move and restraints, ban the obvious skeleton for this specific brief, and generate the three-direction fork when the user has not already supplied a strong concept. The chosen concept must survive into layout and interaction; do not reduce originality to colors, gradients, or typeface choice.
31
32	For higher-quality web work, read `../../references/ui-patterns/design-recipes.md` and output a compact layout sketch before code. If the layout starts to resemble centered hero + three features + CTA, static bento, or generic dashboard cards, read `../../references/ui-patterns/anti-default-contrasts.md` and replace the skeleton with product proof, timeline, trust matrix, comparison, command deck, or another product-specific structure.
33
34	For polished, original, memorable, high-craft, campaign, or "best-looking" requests, read `../../references/ui-patterns/creative-direction.md` before visual styling. Define a creative direction brief with world, metaphor, material language, typography personality, layout grammar, repeated motif, forbidden defaults, one tasteful risk, and restraints.
35
36	For cinematic campaign, editorial scroll story, product proof, or immersive brand pages, read `../../references/ui-patterns/cinematic-landing-system.md` before choosing motion. Define key art, art direction, typography discipline, section rhythm, and page choreography first. Motion should reveal the system, not compensate for weak composition.
37
38	Do not force an expressive landing-page composition onto a repeated-use web app. For operational surfaces, read `../../references/ui-patterns/product-quality-bar.md`, `../../references/ui-patterns/visual-hierarchy.md`, `../../references/ui-patterns/responsive-containment.md`, `../../references/ui-patterns/motion-budget.md`, `../../references/ui-patterns/interaction-techniques.md`, and `../../references/ui-patterns/ui-audit-rubric.md` before coding.
39
40	When the site needs imagery, proof visuals, icons, screenshots, typography, or references, also read `../../references/ui-patterns/asset-selection.md` and include an asset plan before code. If the user is using GPT/Codex and image generation is available, generated bitmap assets are allowed for fictional product visuals, editorial hero imagery, textures, and empty states when they support the product job.
41
42	When using shipped products, Mobbin/Figma screens, docs, or screenshots as refer

People who liked this also viewed

6 picks

Type