figma-portfolio-nextjs

Q: How do I install figma-portfolio-nextjs?

Run npx skills add https://github.com/reason-machines/design-skills --skill figma-portfolio-nextjs in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-portfolio-nextjs/ (personal) or .claude/skills/figma-portfolio-nextjs/ (project).

by reason-machinesFrontend & Design

Build and customize a modern developer/designer portfolio with Next.js, TypeScript, and TailwindCSS featuring animated typing effects and responsive layouts.

Installs: 117
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill figma-portfolio-nextjs

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads figma-portfolio-nextjs automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Figma Portfolio - Next.js Developer Portfolio

Skill by ara.so — Design Skills collection.

A personal portfolio template for developers and designers, built with Next.js 16, TypeScript, and TailwindCSS. Features a clean dark-themed UI with purple gradient accents, animated typing effects, responsive layouts, and sections to showcase projects, experience, and creative skills.

Installation

# Clone the repository
git clone git@github.com:ibrahimmemonn/Figma_Portfolio.git

# Navigate to project directory
cd Figma_Portfolio/

# Install dependencies
npm install

# Run development server
npm run dev

The development server starts at http://localhost:3000.

Project Structure

Figma_Portfolio/
├── app/
│   ├── page.tsx           # Main landing page
│   ├── layout.tsx         # Root layout with font config
│   └── globals.css        # Global styles with Tailwind
├── components/
│   ├── Hero.tsx           # Hero section with typing animation
│   ├── Projects.tsx       # Project showcase section
│   ├── Experience.tsx     # Experience timeline
│   ├── Skills.tsx         # Skills display
│   └── Contact.tsx        # Contact section
├── public/
│   ├── projects/          # Project images
│   └── assets/            # Icons and media
└── tailwind.config.ts     # Tailwind configuration

Key Features & Configuration

Font Configuration

The portfolio uses Poppins font optimized with next/font:

// app/layout.tsx
import { Poppins } from 'next/font/google';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700', '800', '900'],
  variable: '--font-poppins',
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={poppins.variable}>
      <body>{children}</body>
    </html>
  );
}

Hero Section with Typing Animation

// components/Hero.tsx
'use client';
import { useState, useEffect } from 'react';

export default function Hero() {
  const [text, setText] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);
  const [loopNum, setLoopNum] = useState(0);
  const [typingSpeed, setTypingSpeed] = useState(150);

  const roles = ['Software Engineer', 'UI/UX Designer', 'Full Stack Developer'];

  useEffect(() => {
    const handleType = () => {
      const i = loopNum % roles.length;
      const fullText = roles[i];

      setText(
        isDeleting
          ? fullText.substring(0, text.length - 1)
          : fullText.substring(0, text.length + 1)
      );

      setTypingSpeed(isDeleting ? 50 : 150);

      if (!isDeleting && text === fullText) {
        setTimeout(() => setIsDeleting(true), 1000);
      } else if (isDeleting && text === '') {
        setIsDeleting(false);
        setLoopNum(loopNum + 1);
      }
    };

    const timer = setTimeout(handleType, typingSpeed);
    return () => clearTimeout(timer);
  }, [text, isDeleting, loopNum, typingSpeed, roles]);

  return (
    <section className="min-h-screen flex items-center justify-center px-4">
      <div className="max-w-4xl mx-auto text-center">
        <h1 className="text-5xl md:text-7xl font-bold mb-6">
          Hi, I'm <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">Your Name</span>
        </h1>
        <h2 className="text-2xl md:text-4xl mb-8">
          <span className="text-gray-400">{text}</span>
          <span className="animate-pulse">|</span>
        </h2>
        <p className="text-gray-300 text-lg max-w-2xl mx-auto">
          Building digital experiences that combine aesthetic design with powerful functionality.
        </p>
      </div>
    </section>
  );
}

Adding Projects

// components/Projects.tsx
interface Project {
  title: string;
  description: string;
  image: string;
  link: string;
  github?: string;
  tags: string[];
}

const projects: Project[] = [
  {
    title: 'E-Commerce Platform',
    description: 'Full-stack e-commerce solution with Next.js, Stripe, and MongoDB',
    image: '/projects/ecommerce.png',
    link: 'https://example.com',
    github: 'https://github.com/username/project',
    tags: ['Next.js', 'TypeScript', 'Stripe', 'MongoDB'],
  },
  {
    title: 'Portfolio Dashboard',
    description: 'Analytics dashboard for tracking portfolio metrics',
    image: '/projects/dashboard.png',
    link: 'https://example.com',
    tags: ['React', 'Chart.js', 'TailwindCSS'],
  },
];

export default function Projects() {
  return (
    <section className="py-20 px-4">
      <h2 className="text-4xl font-bold text-center mb-12">
        Featured <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">Projects</span>
      </h2>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        {projects.map((project, index) => (
          <div key={index} className="bg-gray-800/50 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
            <img src={project.image} alt={project.title} className="w-full h-48 object-cover" />
            <div className="p-6">
              <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
              <p className="text-gray-400 mb-4">{project.description}</p>
              <div className="flex flex-wrap gap-2 mb-4">
                {project.tags.map((tag, i) => (
                  <span key={i} className="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">
                    {tag}
                  </span>
                ))}
              </div>
              <div className="flex gap-4">
                <a href={project.link} className="text-purple-400 hover:text-purple-300">
                  Live Demo →
                </a>
                {project.github && (
                  <a href={project.github} className="text-gray-400 hover:text-gray-300">
                    GitHub →
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Customizing Theme Colors

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#faf5ff',
          100: '#f3e8ff',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
        },
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
};

export default config;

Adding Analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Deployment

Deploy to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Deploy to production
vercel --prod

Or connect your GitHub repository to Vercel for automatic deployments on every push to main.

Environment Variables

# .env.local (not committed to git)
NEXT_PUBLIC_SITE_URL=https://your-domain.com
NEXT_PUBLIC_GA_ID=your-google-analytics-id

Common Customization Patterns

Add a Contact Form

// components/Contact.tsx
'use client';
import { useState } from 'react';

export default function Contact() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Integrate with your preferred email service
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });
    
    if (response.ok) {
      alert('Message sent successfully!');
      setFormData({ name: '', email: '', message: '' });
    }
  };

  return (
    <section className="py-20 px-4">
      <div className="max-w-2xl mx-auto">
        <h2 className="text-4xl font-bold text-center mb-12">Get In Touch</h2>
        <form onSubmit={handleSubmit} className="space-y-6">
          <input
            type="text"
            placeholder="Your Name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            className="w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
          <input
            type="email"
            placeholder="Your Email"
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
            className="w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
          <textarea
            placeholder="Your Message"
            value={formData.message}
            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
            rows={5}
            className="w-full px-4 py-3 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            required
          />
          <button
            type="submit"
            className="w-full py-3 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg font-semibold hover:opacity-90 transition-opacity"
          >
            Send Message
          </button>
        </form>
      </div>
    </section>
  );
}

Smooth Scroll Navigation

// components/Navigation.tsx
export default function Navigation() {
  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    element?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <nav className="fixed top-0 w-full bg-gray-900/80 backdrop-blur-sm z-50">
      <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
        <div className="text-xl font-bold">Portfolio</div>
        <div className="flex gap-6">
          <button onClick={() => scrollToSection('projects')} className="hover:text-purple-400">
            Projects
          </button>
          <button onClick={() => scrollToSection('experience')} className="hover:text-purple-400">
            Experience
          </button>
          <button onClick={() => scrollToSection('contact')} className="hover:text-purple-400">
            Contact
          </button>
        </div>
      </div>
    </nav>
  );
}

Troubleshooting

Images Not Loading

Ensure images are in the public directory and referenced with absolute paths:

<img src="/projects/myproject.png" alt="Project" />

Typing Animation Not Working

Check that the component is marked as 'use client' for client-side interactivity:

'use client';
import { useState, useEffect } from 'react';

Tailwind Styles Not Applied

Verify tailwind.config.ts content paths include all component directories:

content: [
  './app/**/*.{js,ts,jsx,tsx,mdx}',
  './components/**/*.{js,ts,jsx,tsx,mdx}',
],

Build Errors

Clear Next.js cache and rebuild:

rm -rf .next
npm run build

FAQ

What does the figma-portfolio-nextjs skill do?

Build and customize a modern developer/designer portfolio with Next.js, TypeScript, and TailwindCSS featuring animated typing effects and responsive layouts.

How do I install figma-portfolio-nextjs?

Run npx skills add https://github.com/reason-machines/design-skills --skill figma-portfolio-nextjs in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-portfolio-nextjs/ (personal) or .claude/skills/figma-portfolio-nextjs/ (project).

Which AI agents can use figma-portfolio-nextjs?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is figma-portfolio-nextjs safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains figma-portfolio-nextjs?

It is published by reason-machines in reason-machines/design-skills. It has 117 recorded installs.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

figma-portfolio-nextjs

Install

Install

Describe the task

Review the result

SKILL.md

Figma Portfolio - Next.js Developer Portfolio

Installation

Project Structure

Key Features & Configuration

Font Configuration

Hero Section with Typing Animation

Adding Projects

Customizing Theme Colors

Adding Analytics

Deployment

Deploy to Vercel

Environment Variables

Common Customization Patterns

Add a Contact Form

Smooth Scroll Navigation

Troubleshooting

Images Not Loading

Typing Animation Not Working

Tailwind Styles Not Applied

Build Errors

FAQ

More from reason-machines/design-skills

Popular frontend & design skills