skills.rest
JaivishChauhan
JaivishChauhanCOMMUNITY
Explore all skills by this author →
GitHub

portfolio-components

Create portfolio page sections using the portfolio-components library in Next.js with Tailwind CSS.

6|Updated Jan 29, 2026
Search Tags:#accessibility#components#Next.js#portfolio#Tailwind CSS#UI primitives
One-click install
npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill portfolio-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portfolio-components
Source: https://github.com/JaivishChauhan/vibecoding-starter/tree/main/.agent/skills/portfolio-components
Command: npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill portfolio-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides ready-to-use, accessible, and design-consistent portfolio UI components for developers building Next.js portfolios, reducing design toil and speeding up delivery.

Core Features & Use Cases

  • UI Primitives: Button, Card, Badge, and shared UI elements that can be composed to form sections.
  • Sections: Hero, About, Projects, Experience, Skills, Testimonials, and Contact sections with consistent styling.
  • Layout & Accessibility: Built-in layout components and accessible semantics to ensure keyboard navigation and good contrast.
  • Use Case: Rapidly assemble a complete personal portfolio site by composing the provided components and sections.

Quick Start

Create a portfolio page using the provided portfolio-components library, rendering the HeroSection, AboutSection, ProjectsSection, ExperienceSection, and ContactSection with sample data.

Frequently Asked Questions about portfolio-components

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

FAQPage Schema
How do I build a Next.js portfolio with accessible UI components?▼

Build a Next.js portfolio by importing accessible UI primitives like Buttons, Cards, and Badges from a dedicated component library. This approach ensures keyboard navigation and good contrast across Hero, About, Projects, Experience, and Contact sections.

Can I use Tailwind CSS to style portfolio website sections?▼

Yes, you can use Tailwind CSS to style portfolio website sections. The components require a configured Tailwind CSS environment to apply consistent styling across UI primitives and layout sections.

What do I need to assemble a personal portfolio site with pre-built components?▼

To assemble a personal portfolio site, you need a Next.js project with Tailwind CSS configured. You then import and compose the provided UI sections, such as Hero, Projects, and Contact, with your sample data.

Does this portfolio component library work without Next.js?▼

No, this portfolio component library requires a Next.js project environment to function correctly. It is specifically designed to integrate with Next.js and Tailwind CSS for accessible, performant design across pages.

What is the best way to structure a developer portfolio with UI primitives?▼

The best way to structure a developer portfolio with UI primitives is to compose shared elements like Buttons and Cards into full page sections. This method provides a cohesive UI system and ensures accessible semantics across the entire website.

Related Skills

Explore More Software Engineering Skills→
giuseppe-trisciuogliogiuseppe-trisciuoglio
322

shadcn-ui

Integrate shadcn/ui components in React/Next.js projects with Tailwind CSS.

Community
Intermediate
chiptoe-svgchiptoe-svg

make-website

Publish custom-designed websites to a local Caddy server.

Community
Intermediate
Charles5277Charles5277

nuxt-seo

Configure Nuxt SEO with robots, sitemap, OG images, and schema.org data.

Community
Advanced
CortaLabsCortaLabs

Atlas Bootstrap — One-Shot Portfolio Setup

Automate the Atlas portfolio generation pipeline from configuration to static site building.

Community
Advanced