skills.rest
aidankang
aidankangCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Develop and modify Next.js frontend code with React components and Tailwind CSS.

Updated Aug 23, 2026
Search Tags:#frontend#react#next.js#tailwind css#ui development#swiss style
One-click install
npx skills add https://github.com/aidankang/resume-matcher-gcp-functions --skill frontend-dev-aidankang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/aidankang/resume-matcher-gcp-functions/tree/main/.agents/skills/frontend-dev
Command: npx skills add https://github.com/aidankang/resume-matcher-gcp-functions --skill frontend-dev-aidankang

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation and modification of frontend code for the Resume Matcher application, ensuring consistency with design principles and efficient development workflows.

Core Features & Use Cases

  • Component Development: Create new React components for Next.js applications.
  • Styling: Implement UI elements strictly following the Swiss International Style guide, including specific color palettes, typography, borders, and shadows.
  • API Integration: Connect frontend components to backend APIs using provided utility functions.
  • Internationalization (i18n): Integrate multi-language support into the application.
  • Use Case: When a new feature requires a user profile card, this agent can generate the React component, apply the correct styling, and ensure it integrates seamlessly with the existing application structure.

Quick Start

Use the frontend-dev skill to create a new React component for displaying user job preferences.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I build React components for a Next.js application?▼

To build React components for a Next.js application, you can use this Skill to generate UI elements, apply Tailwind CSS styling, and integrate hooks. It ensures code quality checks are performed during development.

What is the best way to apply Swiss International Style to Tailwind CSS?▼

Applying Swiss International Style to Tailwind CSS involves using specific color palettes, typography, borders, and shadows. This Skill strictly follows the Swiss Style guide to style UI elements consistently.

How do I add internationalization (i18n) support to my Next.js frontend?▼

Adding internationalization (i18n) support to a Next.js frontend is handled directly by this Skill. It integrates multi-language capabilities into your React components and application structure.

Do I need to know React and Tailwind CSS to use this for UI development?▼

Yes, using this for UI development requires knowledge of Next.js, React, and Tailwind CSS. It is designed for developers who need to streamline frontend code creation and modification.

Can I connect Next.js components to backend APIs automatically?▼

Connecting Next.js components to backend APIs is supported using provided utility functions. This Skill handles API integration to ensure frontend components connect seamlessly with your existing application structure.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
BerryKuipersBerryKuipers
7

validate-build

Run production build validation across Vite, TypeScript, Webpack, esbuild, and Rollup.

Community
Intermediate
emaginebremaginebr
1

add-react-i18n

Integrate react-i18next internationalization into React NPM library packages.

Official
Intermediate
sjoerdbeentjessjoerdbeentjes

frontend-design

Design production-grade frontend interfaces with accessible, responsive HTML/CSS/JS.

Community
Intermediate