senior-frontend

What This Skill Does

The Senior Frontend skill is an advanced automation toolkit designed for React and Next.js developers. It acts as an expert pair programmer, capable of scaffolding production-ready frontend projects, generating high-quality TypeScript components, and managing boilerplate configurations. By leveraging internal Python scripts, this skill standardizes the file structure, testing setup, and styling conventions of a project, ensuring consistency across your frontend codebase. Whether you are setting up a new Next.js 14+ application with App Router, generating isolated UI components with Storybook stories, or implementing complex custom hooks, this skill automates the repetitive setup tasks that usually consume developer time.

Installation

To integrate this skill into your environment, run the following command via the ClawHub CLI: clawhub install openclaw/skills/skills/alirezarezvani/senior-frontend Ensure you have Python 3.8+ installed, as the skill relies on internal scripts for project scaffolding and file generation.

Use Cases

• Rapid Prototyping: Instantly scaffold Next.js dashboards with pre-integrated authentication and form validation logic.
• Code Consistency: Use the generator to ensure every component in your project has a corresponding test file and Storybook entry.
• Project Refactoring: Quickly extract complex logic into reusable custom React hooks without worrying about boilerplate.
• Performance Tuning: Analyze current component structures to identify potential re-rendering issues or excessive bundle sizes.

Example Prompts

1. "Scaffold a new Next.js dashboard project with Tailwind CSS, NextAuth, and React Query integration."
2. "Generate a new client-side 'DataGrid' component in the components/ui directory, including a Vitest test file and a Storybook story."
3. "Create a custom hook named 'useDebounce' that accepts a value and delay, including TypeScript type definitions."

Tips & Limitations

• Tips: Always use the --dry-run flag if you are testing new scaffolds to see the file structure before applying changes to your disk. When generating components, grouping them by feature or domain rather than just type (e.g., 'ui', 'hooks') can make scaling easier as the codebase grows.
• Limitations: This skill is optimized for React and Next.js environments and will not be effective for other frameworks like Vue or Angular. It requires write access to the filesystem to execute effectively. Ensure your working directory is clean before running scaffolding commands to avoid file naming conflicts.