# Agent-Features

> This skill guides creation of distinctive, production-grade frontend interfaces for a **Developer Portfolio**.

- Author: ChrisBeep98
- Repository: ChrisBeep98/Portfolio2026
- Version: 20260207162952
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/ChrisBeep98/Portfolio2026
- Web: https://mule.run/skillshub/@@ChrisBeep98/Portfolio2026~Agent-Features:20260207162952

---



This skill guides creation of distinctive, production-grade frontend interfaces for a **Developer Portfolio**.

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to the **"Digital Forge"** aesthetic:
- **Purpose**: Showcase dual mastery (Design + Code).
- **Tone**: **Engineering, Precision, High-Tech, Expressive, Cinematic**.
- **Constraints**: Next.js, Tailwind v4, Framer Motion/GSAP.
- **Differentiation**: Diegetic UI, Scrollytelling, WebGL/Shaders.

**CRITICAL**: Choose a clear conceptual direction.
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- **Production-grade**: Clean, optimized, accessible.
- **Visually striking**: "Awwwards" quality.
- **Cohesive**: Follows `DESIGN-SYSTEM.md`.
- Meticulously refined in every detail






## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: STRICTLY use the defined typography tokens from `PORTFOLIO-DESIGN-SYSTEM.md` and `globals.css` (e.g., `text-h-expedition`, `text-hero-title`). Do not use raw Tailwind sizes unless absolutely necessary for a custom effect. Typography should be treated as a graphical element.
- **Color & Theme**: Commit to the **PORTFOLIO Atmosphere**. AND PORTFOLIO-DESIGN-SYSTEM.md

    - **Mandate**: NEVER hardcode colors. Use semantic tokens (`bg-background`, `text-foreground`). Accents  must adapt their intensity via opacity based on the active theme.
- **Motion (The "Creative Motion" Standard)**: 
    - Use **GSAP** for all complex animations. 
    - Prioritize **ScrollTrigger** for revealing content. Elements should not just "appear"; they should enter the stage.
    - Use `clip-path` for revealing images.
    - Use `parallax` (different scroll speeds) to create depth.
- **Spatial Composition**: 
    - **Vertical Rhythm**: Respect the `section-v-spacing` utility.
    - **Page Frame**: Always respect `--spacing-frame` / `px-frame`.
    - **Asymmetry**: Avoid perfect centering everywhere. Use offset grids and overlapping elements to create tension and interest.
- **Backgrounds & Visual Details**: 
    - Avoid flat backgrounds. Use subtle gradients  or noise textures.
    - Use `backdrop-blur` for overlays but keep them legible.




  
NEVER use generic AI-generated aesthetics like overused font families, cliched color schemes (particularly purple gradients on white backgrounds unless specified by brand), predictable layouts, and cookie-cutter design.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.