skills.rest
gracefullight
gracefullightCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

oma-frontend

Build and modify React and Next.js TypeScript UIs with FSD-lite and KRDS constraints.

46|2|Updated Mar 23, 2025
Search Tags:#typescript#accessibility#react#design tokens#nextjs#tailwind#shadcn ui
One-click install
npx skills add https://github.com/gracefullight/krds --skill oma-frontend-gracefullight
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: oma-frontend
Source: https://github.com/gracefullight/krds/tree/main/.agents/skills/oma-frontend
Command: npx skills add https://github.com/gracefullight/krds --skill oma-frontend-gracefullight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you implement React/Next.js/TypeScript frontend work that stays consistent with the project’s design system, architecture boundaries (Server vs Client Components), and accessibility expectations.

Core Features & Use Cases

  • KRDS-aligned UI implementation: Build and modify pages, layouts, and components using project tokens, conventions, and shadcn/ui patterns.
  • Safe architecture boundaries: Choose correct Server vs Client Component structure for SEO/metadata versus interactive hooks and state.
  • Frontend verification discipline: Run self-checks covering Next.js 16 proxy conventions, TypeScript strictness, responsive behavior, accessibility, and testing.

Quick Start

Use oma-frontend to implement a new “Users Settings” page with a shadcn-based form, Tailwind styling, i18n strings, and TanStack Query data fetching that meets the project checklist.

Frequently Asked Questions about oma-frontend

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

FAQPage Schema
How do I build accessible React components that align with the KRDS design system?▼

To build accessible React components aligned with KRDS, use this Skill to generate UI elements with project tokens, shadcn/ui patterns, and Tailwind v4, ensuring strict responsive and accessibility checks pass automatically.

What is the correct way to structure Server vs Client components in Next.js?▼

Structuring Server vs Client components correctly requires separating SEO and metadata concerns from interactive hooks and state. This Skill enforces safe architecture boundaries to choose the right component type for Next.js TypeScript projects.

How do I integrate shadcn/ui with Tailwind v4 and TypeScript in a Next.js project?▼

Integrating shadcn/ui with Tailwind v4 involves applying design tokens and FSD-lite architecture conventions. This Skill handles the component integration, styling, and frontend API wiring while maintaining TypeScript strictness.

Can I use this to wire forms with TanStack Query and i18n strings in Next.js?▼

Yes, you can implement pages with shadcn-based forms, TanStack Query data fetching, and i18n strings. The Skill ensures proper client/server state management and token sourcing for internationalization.

Does the Skill handle frontend verification like linting, typechecking, and testing?▼

Yes, the Skill enforces frontend verification discipline by running self-checks that cover Next.js proxy conventions, TypeScript strictness, responsive behavior, accessibility, and testing before considering the implementation complete.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
ovachieverovachiever
52

tanstack-start

Build full-stack React apps on Cloudflare Workers with TanStack Start.

Community
Advanced
lhz960904lhz960904
26

frontend-starter

Generate a Vite + React + TypeScript frontend template with Tailwind v3, shadcn/ui, TanStack Router/Query, and Zustand.

Community
Basic
DevattomDevattom

ui-styling

Create responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate