skills.rest
dev-five-git
dev-five-gitOFFICIAL
Explore all skills by this author →
WebsiteGitHub

devfive-frontend

Enforces Next.js App Router coding conventions and devup-ui styling patterns for DevFive frontend projects.

1|Updated Aug 30, 2026
Search Tags:#frontend#react#coding conventions#next.js#server components#app router#devup-ui
One-click install
npx skills add https://github.com/dev-five-git/devup-mcp --skill devfive-frontend-dev-five-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devfive-frontend
Source: https://github.com/dev-five-git/devup-mcp/tree/main/crates/devup-mcp/src/server/skills/devfive-frontend
Command: npx skills add https://github.com/dev-five-git/devup-mcp --skill devfive-frontend-dev-five-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? DevFive frontend projects (puzzle-fit, girok-space) follow strict architectural conventions that are easy to violate: Server Component boundaries, devup-ui static style extraction, component file placement, and export rules. This Skill encodes those conventions so generated React/Next.js code passes the project's lint, type-check, and bundle-size requirements on the first attempt. ## Core Features & Use Cases - Server Component discipline: Decision tables for when 'use client' is required, prop-passing patterns that avoid forcing client components, and hook-isolation patterns that minimize JS bundle size. - devup-ui styling rules: Static extraction rules (inline object indexing vs. CSS variables), the css() className exception, the prohibition on authored .css files, and resetCss()/globalCss() usage. - Project structure enforcement: Monorepo layout, app/ folder restricted to layout.tsx/page.tsx, page-specific components under components/pages/, SVG icon file rules, and naming conventions. - Use Case: When asked to build a login page in a vinext-based Next.js app, the Skill produces a Server Component page.tsx with a descriptive LoginPage name, a minimal client form using react-hook-form, style props extracted at build time, and code that passes bun tsc --noEmit && bun run lint. ## Quick Start Load the devup-ui skill first, then apply this skill and write a new Next.js App Router page component following DevFive conventions.

Frequently Asked Questions about devfive-frontend

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

FAQPage Schema
How do I decide when to use 'use client' in Next.js App Router?▼

Add 'use client' only when a component defines event handlers internally or uses hooks like useState, useEffect, or useRouter. Components that receive optional callbacks via props and pass them directly (onClick={onClick}) can remain Server Components.

How do I write variant-based styles with devup-ui?▼

Use inline object indexing at the JSX prop site, such as w={{ sm: '36px', md: '44px' }[size]}, so devup-ui extracts static classes at build time. External objects of raw style values fall back to runtime CSS variables, but objects holding css() results are fine.

Does a vite.config.ts file mean the project is a Vite SPA?▼

No. vinext runs Next.js App Router on Vite, so a normal App Router project has vite.config.ts and no next.config.ts. Check package.json dependencies: vinext or next means App Router with src/app file routing, never a hand-rolled main.tsx.

Can I write a plain CSS file in a devup-ui project?▼

No. Hand-written .css or .scss files are invisible to devup-ui's build-time extraction and compete with generated classes. Use resetCss() from @devup-ui/reset-css, globalCss() for document rules, and style props or css() for component styling.

Why does my Server Component fail when I wrap onClick in an arrow function?▼

Writing onClick={() => onClick?.()} defines a new function internally, which forces 'use client'. Pass the prop directly (onClick={onClick}) or use a conditional like onClick={onClick ? () => onClick() : undefined} to stay a Server Component.

Where should component files live in a DevFive Next.js project?▼

The src/app folder may contain only layout.tsx and page.tsx. Shared components go in components/common or components/layout, and page-specific components go in components/pages/{page-path}/. Single-color SVG icons belong in public/icons as .svg files.

Related Skills

Explore More Software Engineering Skills→
bradtaylorsfbradtaylorsf
8

mui-styling

Demonstrate Material-UI styling with the sx prop, styled API, and CSS utilities.

Community
Intermediate
marcioaltoemarcioaltoe
14

project-workflow

Automate Bun and TypeScript pre-commit quality gates with specified commands.

Community
Intermediate
h617265630h617265630

user-m

Generate backend User models, auth APIs, and frontend components.

Community
Intermediate
tenequmtenequm
32

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.

Community
Intermediate