design-stack-picker

Solid

Use when building or restyling frontend UI and choosing building blocks — icon sets, fonts, component/block libraries, accessible primitives, imagery sources, color systems, motion, shadows, spacing, and image optimization. For landing pages, ecommerce, dashboards, web apps, emails, and single components.

Web & Frontend 3 stars 0 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 82/100

Stars 20%
20
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# design-stack-picker A selection layer, not a mandate to replace the project's design system. ## Decision order Audit first: framework and rendering model, existing icons/fonts/tokens/components/image pipeline/breakpoints, current dependencies, visual style. Then: 1. Reuse the existing project system if it works. 2. Extend it with the smallest compatible building block. 3. Add a library only when there is no good local solution. 4. Hand-craft only for brand assets, tiny static pieces, or where a dependency outweighs the implementation. ## Defaults Starting points, not requirements. | Axis | Default | |---|---| | Icons | Iconify + Solar; Simple Icons for brand marks | | Fonts | Unbounded display + Onest body via Fontsource | | Components | Project components first; HyperUI/Preline for static sections; shadcn/Radix for React primitives | | Color | Semantic CSS variables; one dominant brand color + one accent | | Motion | CSS-first restrained reveal; Motion for React; GSAP only for complex timelines | | Imagery | Real product/user/stock/CMS assets; AVIF/WebP where practical | ## Dependency budget No dependency for: a single icon when an icon system exists; one static section existing primitives can handle; a basic disclosure/dropdown in Astro or plain HTML where scoped JS is smaller and verifiable; a visual effect existing CSS covers; anything duplicating a current dependency. Add one when it removes real implementation risk: complex accessible widgets, broad consiste...

Details

Author
sergeyizmailov
Repository
sergeyizmailov/knowledge-delta-skills
Created
2 months ago
Last Updated
3 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

ui-ux-design

Expert UI/UX design workflow and standards — token-first design systems, the shadcn/ui + Tailwind + Radix build stack, accessibility (WCAG AA), and self-contained HTML mockups. Use when designing interfaces, building front-end components, creating mockups/prototypes, or reviewing UI for quality and accessibility. The project's existing design system always wins.

2 Updated 1 months ago
vinaygiri
Web & Frontend Listed

ui-standout

Pick STANDOUT, fit-for-purpose UI components per use-case instead of reusing the same mundane flows. A 3-layer method: query real component catalogs (astryx / shadcn / Aceternity) for candidates, reject AI-slop defaults with a 46-rule taste gate (harvested from impeccable), and justify the pick with design principles (hierarchy, spacing, type, color, Von Restorff standout). Ships a use-case to component map so a checkout, dashboard, hero, onboarding or empty-state screen gets a standout component, not a stock grid. Use this BEFORE building, restyling, theming or polishing the rendered UI of a web, SSR or static app; when the user says a UI is bland/generic/mundane/"looks like every other app"; or when reviewing a built UI for slop. Not for backend/serverless-API/networking services (no UI), not for form validation/schema/handler code or tests that merely name a component, and not for charts specifically (the dataviz skill owns those).

1 Updated 1 months ago
M4NUSH7
Web & Frontend Listed

ui-asset-sourcing

Source the actual assets a website or app needs — icons, imagery, logos, avatars, empty-state art — without hallucinating SVG paths, shipping emoji as icons, or dropping in stock photos that fight the palette. Trigger for "what icons should I use", "给这个网站配图", "add icons to this UI", "generate a hero image for this landing page", "这个空状态要放什么插图", "need a logo for this brand", or whenever a design direction exists and the remaining gap is the visual material to fill it. Names which icon set fits which aesthetic, how to fetch real icon and brand SVGs rather than inventing path data, and how to generate on-palette imagery with Aria Code's own image tools (`aria.report.generate_image_local` free/local, or `aria.report.generate_image` paid) when a stock photo would be wrong. Do NOT trigger to choose the design direction itself (use `industry-design-direction`) or to compile a single editorial poster (`minimal-editorial-poster`). Portable: self-contained prose, no script dependency.

2 Updated 6 days ago
artherahq