skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

senior-frontend

Generate React components with TypeScript, tests, and Storybook stories.

Updated Jun 27, 2026
Search Tags:#typescript#react#next.js#tailwind css#frontend development
One-click install
npx skills add https://github.com/truongnat/aix --skill senior-frontend-truongnat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/truongnat/aix/tree/main/content/skills/senior-frontend
Command: npx skills add https://github.com/truongnat/aix --skill senior-frontend-truongnat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, scripts, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines frontend development for React, Next.js, TypeScript, and Tailwind CSS applications, offering tools for component generation, performance optimization, and accessibility compliance.

Core Features & Use Cases

  • Component Generation: Automatically generate React components with TypeScript, tests, and Storybook stories.
  • Performance Optimization: Analyze and optimize bundle sizes for efficient loading and rendering.
  • Accessibility: Implement accessibility features like ARIA labels and keyboard navigation.
  • Use Case: When you need to build a modern, performant, and accessible web application, this Skill provides the necessary tools and guidance.

Quick Start

Generate a Next.js project with TypeScript and Tailwind CSS: generate-project my-app --template nextjs

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I generate a React component with TypeScript and Tailwind CSS automatically?▼

To generate a React component with TypeScript and Tailwind CSS, use the provided Python scripts to automatically scaffold the component files alongside tests and Storybook stories, streamlining component generation and maintenance.

How do I analyze and optimize bundle sizes in a Next.js application?▼

You can analyze and optimize bundle sizes in a Next.js application by running the included Python scripts for bundle analysis. This process identifies inefficient loading and rendering issues to improve overall performance optimization.

How do I add ARIA labels and keyboard navigation to a React frontend?▼

Add ARIA labels and keyboard navigation to a React frontend by following the incorporated accessibility guidelines within the skill. This ensures your web application meets compliance standards for users needing assistive technologies.

Do I need Python installed to use this frontend development tool?▼

Yes, you need Python installed because the component generation and bundle analysis features require Python scripts to execute. These scripts handle the automated creation of React components and performance optimization tasks.

What is the best way to scaffold a Next.js project with TypeScript and Tailwind CSS?▼

The best way to scaffold a Next.js project with TypeScript and Tailwind CSS is using the `generate-project` command with the `nextjs` template. This sets up the foundational structure for modern, performant web applications instantly.

Related Skills

Explore More Software Engineering Skills→
dual-devs0dual-devs0
1

senior-frontend

Automate React and Next.js component generation, bundle analysis, and project scaffolding.

Community
Advanced
hainamchunghainamchung
54

frontend-developer

Design scalable React 19+ and Next.js 15 frontends with accessible components.

Community
Advanced
manastalukdarmanastalukdar
1

component-library

Scaffold a component library with Storybook, testing, and build configuration.

Community
Advanced
SKANLSKANL

senior-frontend

Generate React components, analyze bundles, and scaffold frontend projects via Python scripts.

Community
Intermediate