skills.rest
castlemilk
castlemilkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-components

Create React components following Shorted conventions for Next.js frontends.

3|Updated Jan 22, 2024
Search Tags:#typescript#frontend#react#nextjs#tailwind#ui-components#components-patterns
One-click install
npx skills add https://github.com/castlemilk/shorted.com.au --skill react-components-castlemilk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/castlemilk/shorted.com.au/tree/main/.claude/skills/react-components
Command: npx skills add https://github.com/castlemilk/shorted.com.au --skill react-components-castlemilk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create React components that follow Shorted project conventions for the Next.js frontend.

Core Features & Use Cases

  • Location-aware component patterns: UI primitives, feature components, page components, and hooks.
  • Template-driven development: follow standardized component skeletons and naming conventions.
  • Reuse and consistency: ensures styling and behavior alignment across the app.

Quick Start

Create a new React component following the Shorted conventions and place it under the appropriate web/src path.

Frequently Asked Questions about react-components

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

FAQPage Schema
How do I build consistent React UI components for a Next.js frontend?▼

Build consistent React UI components by applying template-driven patterns that enforce standardized skeletons, naming conventions, and specific web/src location rules for UI primitives and feature components.

What is the best way to structure React component locations in a Next.js app?▼

The best way to structure React component locations is by using location-aware patterns that categorize files as UI primitives, feature components, page components, or hooks within your web/src directory.

Can I use TypeScript and Tailwind to create feature components following project conventions?▼

Yes, you can use TypeScript and Tailwind to create feature components that align with project conventions, ensuring styling and behavior consistency through standardized component templates and coding standards.

How do I generate standardized React hooks and page routes without breaking existing structure?▼

Generate standardized React hooks and page routes by applying enforced component templates that maintain structural alignment across your Next.js application without breaking existing location patterns.

When should I not use standardized component templates for frontend development?▼

You should not use standardized component templates when your project requires highly customized structures outside the Next.js ecosystem, as these patterns strictly enforce predefined UI primitive and hook conventions.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
addisualemuaddisualemu

expo-ui-agent

Generate and modify Expo screens and UI components with NativeWind styling.

Community
Intermediate
gabriellpequenogabriellpequeno
8

tailwind-patterns

Organize Tailwind usage around design tokens for consistent UI.

Community
Intermediate
aaronbassettaaronbassett
4

devs:react-core

Guide React application architecture, performance, and security with React 19 features.

Community
Advanced