skills.rest
pohlai88
pohlai88COMMUNITY
Explore all skills by this author →
GitHub

design-website-ui

Compose marketing pages from existing design-system primitives with Tailwind v4.

Updated Apr 5, 2026
Search Tags:#design#ui#website#storybook#tailwind#design-system
One-click install
npx skills add https://github.com/pohlai88/afenda-vite-react --skill design-website-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-website-ui
Source: https://github.com/pohlai88/afenda-vite-react/tree/main/.agents/skills/design-website-ui
Command: npx skills add https://github.com/pohlai88/afenda-vite-react --skill design-website-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Design and refine Afenda's marketing website UI by composing the existing Afenda marketing shell, page scaffolds, and design-system primitives instead of inventing a new visual system. Trust the live codebase first, then use the docs to explain and reinforce the direction.

Core Features & Use Cases

  • Reuse marketing page scaffolds and shared primitives from the design system to build pages, sections, and components.
  • Ensure responsive layouts, semantic tokens, accessibility, and brand consistency across landing pages, feature blocks, CTAs, and image treatments.
  • Use optional Storybook deliverables (*.stories.tsx) when Storybook is installed or requested to illustrate states like default, loading, and mobile.

Quick Start

Open the target marketing page in apps/web and implement using MarketingPageShell and existing primitives.

Frequently Asked Questions about design-website-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a marketing website UI using Tailwind and design-system primitives?▼

Build marketing website UI by composing existing page scaffolds and shared primitives instead of inventing a new visual system. Use the MarketingPageShell in apps/web with Tailwind v4 and shadcn-style components to assemble landing pages, feature blocks, and CTAs.

Can I generate Storybook stories for marketing components?▼

Yes, you can generate optional Storybook deliverables (*.stories.tsx) to illustrate component states like default, loading, and mobile. This requires Storybook to be installed or explicitly requested in your environment.

What's the best way to ensure brand consistency and accessibility in website landing pages?▼

Ensure brand consistency and accessibility by enforcing semantic tokens, responsive layout rules, and shared design-system primitives across all marketing surfaces. Reuse existing page scaffolds rather than creating custom visual systems.

Does this approach work for building feature sections and CTAs within an existing web app?▼

Yes, this approach works for building feature sections and CTAs within apps/web. Compose marketing components from existing design-system primitives to maintain visual consistency and enforce responsive layouts across all marketing surfaces.

Why should I use shared design-system primitives instead of custom CSS for marketing pages?▼

Use shared design-system primitives to maintain semantic tokens, accessibility standards, and consistent branding across marketing UI. Inventing a new visual system risks fragmentation, while reusing existing scaffolds ensures polished, responsive website surfaces.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
johinsDevjohinsDev

ui

Develop shared UI components with Base UI, shadcn, and Storybook 9.

Community
Intermediate
LrmdomLrmdom

frontend-design

Generate production-grade frontend interfaces with cohesive design systems.

Community
Advanced