personal-fos-frontend-skill

To build production-grade frontend interfaces, this Skill coordinates a structured discovery process, design thinking, and implementation stages to output TypeScript, Tailwind CSS, and shadcn/ui code. It ensures full accessibility, responsive behavior, and light/dark mode support.

The best way to structure Next.js component design for dashboards is through a guided discovery process that articulates layout, typography, and animation plans for approval before implementation. This ensures consistent, accessible, and production-ready code output.

Yes, you need Tailwind CSS installed to execute frontend development tasks with this Skill. It requires Next.js, Tailwind CSS, and shadcn/ui dependencies to output production-grade TypeScript code with full responsive behavior and light/dark mode support.

Yes, you can create accessible landing pages with light and dark mode support. The Skill handles full-page builds, component design, theming, and animations, outputting TypeScript and Tailwind CSS code tailored for marketing sites and landing pages.

The design thinking process articulates layout, typography, and animation plans for user approval before implementation begins. This ensures all frontend requirements are met before outputting accessible Next.js and shadcn/ui code.

A key limitation is that this approach strictly requires Next.js, Tailwind CSS, and shadcn/ui to execute tasks. If your frontend environment lacks these specific dependencies, the Skill cannot facilitate the structured discovery and build process.