skills.rest
TheSmartHost-Co
TheSmartHost-CoOFFICIAL
Explore all skills by this author →
GitHub

add-frontend-feature

Generates Next.js pages, components, and forms following TheSmartHost project conventions.

Updated Oct 6, 2025
Search Tags:#typescript#frontend#react#next.js#tailwind css#zustand#crud modals
One-click install
npx skills add https://github.com/TheSmartHost-Co/thesmarthost --skill add-frontend-feature-thesmarthost-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-frontend-feature
Source: https://github.com/TheSmartHost-Co/thesmarthost/tree/main/.claude/skills/add-frontend-feature
Command: npx skills add https://github.com/TheSmartHost-Co/thesmarthost --skill add-frontend-feature-thesmarthost-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building new UI features in an established Next.js codebase often leads to inconsistent file organization, naming, and styling. This Skill enforces TheSmartHost's conventions so every new page, modal, and form matches existing patterns. ## Core Features & Use Cases - File Structure Conventions: Defines where components, pages, services, and Zustand stores live, with naming rules for CRUD modals and route groups. - Component & Form Patterns: Provides full code templates for create/update/delete modals, list pages with tables, validation, and dynamic API-driven dropdowns. - Styling Guide: Documents Tailwind CSS utility patterns for buttons, inputs, tables, badges, and responsive layouts. - Use Case: When asked to add a new "properties" management page, the Skill produces a list page with a table, create/update/delete modals, typed service calls, and notification handling that match the project's existing code. ## Quick Start Ask the AI to add a new frontend feature, such as "create a clients management page with add, edit, and delete modals following the project conventions."

Frequently Asked Questions about add-frontend-feature

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

FAQPage Schema
How do I add a new CRUD page in a Next.js App Router project?▼

Create a page.tsx under the appropriate route group, fetch data via a service function, and wire up create, update, and delete modal components. The Skill provides complete templates for the list page, modals, and state handlers.

How should I structure components and services in this project?▼

Components are grouped by resource with create, update, delete, and preview subfolders. Services live in src/services as camelCase files with a Service.ts suffix, and their TypeScript interfaces go in services/types.

When should I use Zustand versus local useState in React?▼

Use Zustand for global state like user profiles, authentication, and notifications, especially data that must persist across refreshes. Use local useState for form inputs, modal open/close state, and component-specific UI.

Does this Skill work with styled-components or CSS modules?▼

No. The project mandates Tailwind CSS utility classes applied directly in JSX. The styling guide documents the exact class patterns for buttons, inputs, tables, badges, and responsive layouts.

How is form validation handled before API calls?▼

Validation runs client-side in the submit handler: required fields are trimmed and checked, numbers are parsed and range-checked, and enums are verified. Failures trigger error notifications through the notification store before any request is sent.

Related Skills

Explore More Software Engineering Skills→
AsmayaseenAsmayaseen
2

Frontend TypeScript Types Skill

Define frontend TypeScript types from backend contracts with naming conventions.

Community
Basic
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
AgentSystemLabsAgentSystemLabs
121

add-e2e-test

Add Playwright end-to-end tests with smoke gates and role-based assertions.

Official
Advanced
Sir-chawakornSir-chawakorn
33

code-generation

Generate React components, Next.js API routes, and project templates.

Community
Intermediate