webdesignlisted

Design, build, review, and test modern web interfaces and frontend app experiences. Use for responsive UI, visual polish, accessibility audits, design systems, Next.js or React implementation, TanStack Router/Query/Form/Table/Start, Playwright/Vitest web testing, Core Web Vitals, dashboards, forms, data tables, charts, landing pages, product pages, and optional Three.js/WebGL/WebGPU scenes.
vanducng/skills · ★ 0 · Web & Frontend · score 73

Install: claude install-skill vanducng/skills

# Webdesign Build web interfaces that are visually deliberate, accessible, responsive, tested, and aligned with the existing app stack. This skill consolidates design quality, frontend framework choices, TanStack patterns, web testing, and optional Three.js work into one web-first workflow. ## Reference Router Read only what the task needs: - `references/design-quality.md`: visual design, UX review, accessibility, responsive layout, typography, forms, charts, and polish checks. - `references/app-frameworks.md`: React, Next.js App Router, Server/Client Components, caching, monorepos, icons, and frontend architecture. - `references/tanstack.md`: TanStack Router, Query, Form, Table, Start, and when to choose them. - `references/testing.md`: Vitest, Testing Library, Playwright, accessibility, visual regression, performance, cross-browser, CI, and release checks. - `references/threejs.md`: Three.js, GLTF, WebGL/WebGPU, animations, interaction, performance, and browser verification. ## Workflow 1. Inspect the existing app before choosing patterns: package manager, framework, route layout, component library, design tokens, icons, tests, and current visual conventions. 2. Classify the task: - **Design/review:** load `design-quality.md`. - **React/Next/framework architecture:** load `app-frameworks.md`. - **TanStack feature:** load `tanstack.md`. - **Tests, QA, a11y, performance, or release validation:** load `testing.md`. - **3D/WebGL/WebGPU/canvas scene:** load