skills.rest
ano4l
ano4lCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Scaffold React and Next.js projects with TypeScript and Tailwind CSS.

Updated Jun 2, 2026
Search Tags:#typescript#accessibility#react#next.js#tailwind css#bundle optimization#frontend scaffolding
One-click install
npx skills add https://github.com/ano4l/MedCore --skill senior-frontend-ano4l
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/ano4l/MedCore/tree/main/skills/senior-frontend
Command: npx skills add https://github.com/ano4l/MedCore --skill senior-frontend-ano4l

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the manual overhead of setting up React/Next.js projects, writing repetitive component boilerplate, optimizing bundle sizes, and enforcing frontend best practices, freeing developers to focus on building healthcare platform features for MedCore.

Core Features & Use Cases

  • Project Scaffolding: Generate production-ready Next.js or React + Vite projects with TypeScript, Tailwind CSS, and optional features like authentication, API clients, and testing setups.
  • Component Generation: Create reusable client/server components, custom hooks, tests, and Storybook stories with consistent TypeScript and Tailwind patterns.
  • Bundle Optimization: Analyze project dependencies and import patterns to identify heavy packages, reduce bundle size, and improve load times for low-bandwidth users.
  • Use Case: For MedCore's patient portal, use this Skill to scaffold a compliant Next.js project, generate accessible form components, and optimize bundle size to load quickly on mobile networks across South Africa.

Quick Start

Use the senior-frontend skill to generate a new Next.js patient dashboard project with authentication, API client, and testing features pre-configured.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a production-ready Next.js project with TypeScript and Tailwind CSS?▼

Scaffolding a production-ready Next.js project with TypeScript and Tailwind CSS is automated here by generating the foundational structure, configuring optional authentication, API clients, and testing setups to yield a consistent, ready-to-develop codebase.

What's the best way to generate reusable React components with Storybook stories and tests?▼

Generating reusable React components with Storybook stories and tests is handled by automated component generation, producing boilerplate logic, custom hooks, test files, and stories to deliver consistent TypeScript and Tailwind CSS UI elements.

How can I analyze and reduce my React bundle size for low-bandwidth users?▼

Analyzing and reducing React bundle size for low-bandwidth users is achieved by auditing project dependencies and import patterns to identify heavy packages, applying optimization best practices to yield faster load times and a smaller footprint.

Does this approach support creating WCAG-compliant accessible UI components?▼

Creating WCAG-compliant accessible UI components is fully supported through enforcing frontend best practices during component generation, ensuring modern React and Next.js applications meet strict accessibility implementation requirements.

Can I use this to initialize a React and Vite project instead of Next.js?▼

Initializing a React and Vite project instead of Next.js is supported by the scaffolding features, applying consistent TypeScript and Tailwind CSS configurations to yield a production-ready foundational codebase.

Related Skills

Explore More Software Engineering Skills→
Mahaboob26Mahaboob26

setting-up-streamlit-environment

Automate Python environment setup for Streamlit projects with uv.

Community
Intermediate
alirezarezvanialirezarezvani
24.2k

senior-frontend

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

Community
Intermediate
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
hii-saikrishnahii-saikrishna

lightweight-3d-effects

Apply Zdog, Vanta.js, and Vanilla-Tilt.js 3D effects to web content.

Community
Intermediate