skills.rest
josoroma
josoromaCOMMUNITY
Explore all skills by this author →
GitHub

generated-app-standards

Enforces formatting, export, component, and schema conventions for generated Next.js app code.

6|Updated Jul 12, 2026
Search Tags:#typescript#linting#code generation#zod#nextjs#react hooks#code conventions
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill generated-app-standards-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generated-app-standards
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/generated-app-standards
Command: npx skills add https://github.com/josoroma/AppLoop --skill generated-app-standards-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Generated Next.js projects drift in formatting, export style, component boundaries, and schema patterns, causing validation failures, broken inspect-mode targeting, and inconsistent template behavior. This Skill gives the AI a single source of truth for code conventions before editing and during validation repair. ## Core Features & Use Cases - Code Convention Enforcement: Applies kebab-case filenames, named PascalCase exports, route colocation rules, and Zod schema/server-action patterns to every generated file. - Inspect-Mode Classname Rules: Ensures every visible element carries base plus unique-last semantic classnames so AppLoop's element inspector can target repeated components precisely. - Pitfall Recovery Guides: Documents fixes for React hooks lint errors, hydration mismatches, Turbopack stale-cache issues, portal SSR guards, and template sync workflows. - Use Case: When Hermes edits a generated dashboard and lint fails on react-hooks/set-state-in-effect, the Skill prescribes the lazy useState initializer pattern instead of patching with useEffect. ## Quick Start Apply the generated app standards to review and fix the component structure and classnames in my Next.js project.

Frequently Asked Questions about generated-app-standards

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

FAQPage Schema
How do I enforce naming conventions in generated Next.js code?▼

Use kebab-case filenames with matching PascalCase named exports, for example project-card.tsx exports ProjectCard. Run npm run format, lint, and typecheck in the generated project to verify compliance after edits.

How to fix react-hooks/set-state-in-effect lint errors?▼

Replace setState calls inside useEffect with a lazy useState initializer like useState(() => computeDefault()). The initializer runs once during mount and avoids the cascading re-render that triggers the lint rule.

Why does Next.js Turbopack not detect my file changes?▼

Turbopack's native file watcher can miss externally written changes. Add CHOKIDAR_USEPOLLING=true to the dev script for polling; if the compiled hash stays stale, kill and restart the dev server, or delete the .next cache as a last resort.

How do I avoid React hydration mismatch errors with random values?▼

Keep Math.random() in the useState lazy initializer and add suppressHydrationWarning to the rendering container. Avoid useEffect-based fixes, which trip lint rules, and replace toLocaleTimeString with explicit getHours/getMinutes formatting.

When should server actions and Zod schemas be colocated with routes?▼

Keep schemas and server actions near the route that consumes them using approved files like actions.ts and schema.ts. Only move helpers to a shared folder after three real route call sites exist.

Related Skills

Explore More Software Engineering Skills→
hemant0510hemant0510

dev

Start a local development server and verify the app in a browser.

Community
Basic
software-mansionsoftware-mansion
822

post-work-checks

Enforce post-change quality gates for the React Native audio-api project.

Official
Intermediate
automata-networkautomata-network

design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Official
Advanced
Asymmetric-alAsymmetric-al
417

nextjs-app-router

Validate Next.js App Router architecture, rendering strategy, and data fetching.

Official
Intermediate