Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From dev-specialisms
Create distinctive frontend interfaces with faux-ASCII aesthetic, warm dark palettes, and expressive motion. Use when user mentions ASCII art, dot matrix, scanline effects, terminal aesthetic, pixelated figures, block letterforms, "vibes", "make it vibes", "use the aesthetic from frontend-vibes", warm blacks, terracotta accents, Anthropic-adjacent design, technical romance, or wants emotionally expressive UI that balances precision with organic imperfection.
npx claudepluginhub aaronbassett/agent-foundry --plugin dev-specialismsHow this skill is triggered — by the user, by Claude, or both
Slash command
/dev-specialisms:frontend-vibesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides creation of distinctive, emotionally expressive frontend interfaces that balance technical precision with organic imperfection. Build React + TypeScript + Tailwind applications with faux-ASCII aesthetics, warm dark palettes, spring-based motion, and Anthropic-adjacent design sensibility.
Provides frontend design principles avoiding AI slop like Inter/Roboto fonts, purple gradients, and bland layouts. Guides thoughtful typography, colors, animations for polished UIs.
Builds and refines React/Next.js frontend UIs with strict design taste, calibrated colors, responsive layouts, and motion rules, overriding generic LLM biases.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold aesthetics, unique typography, motion, and layouts avoiding generic AI designs.
Share bugs, ideas, or general feedback.
This skill guides creation of distinctive, emotionally expressive frontend interfaces that balance technical precision with organic imperfection. Build React + TypeScript + Tailwind applications with faux-ASCII aesthetics, warm dark palettes, spring-based motion, and Anthropic-adjacent design sensibility.
The essence of this aesthetic lives in a productive tension: technical precision meets organic imperfection. The grid exists, but something breaks out of it. Type is clean, but rendered in dots or blocks. Palettes are restrained, but punctuated with jarring accents that make everything sing.
Expressive by Design: Create interfaces that make users feel something. Research shows expressive design helps users spot key elements 4x faster while inspiring emotional connection through strategic use of color, shape, size, motion, and containment. Balance emotional engagement with functional clarity—never sacrifice core usability for visual appeal.
The Feeling: Confidence of someone who knows what they're doing, expressed through restraint rather than excess. Technical but not cold. Modern but referencing history. Clean but with texture. Serious but with moments of play.
When to Use: Creative portfolios, developer tools, design systems, technical documentation, AI/LLM interfaces, anything wanting a distinctive voice. The constraint (faux-ASCII, warm palettes, spring motion) becomes the style.
Map Material Design's five expressive elements to this distinctive aesthetic:
1. Color as Expression Strategic color use draws attention and conveys emotion. Prefer dark foundations (warm blacks with olive/brown undertones) punctuated by vibrant accents (electric orange, coral, neon green). The 90/10 rule: 90% restrained background, 10% vibrant accent doing all the emotional work.
2. Shape as Identity Distinctive forms create visual memory. Employ faux-ASCII shapes (block letterforms built from rectangles, pixelated figures, geometric patterns), scanline overlays, dot matrix compositions, and technical construction lines that reveal the design process.
3. Size as Hierarchy Proportional emphasis establishes importance. Use dramatic scale jumps: 48-80px bold headlines (700-900 weight) contrasted with restrained 14-16px body (400 weight). The gap between them IS the design.
4. Motion as Guide Dynamic transitions direct attention. Prefer spring-based physics over easing curves—animations that bounce slightly feel alive and intentional. Reserve expressive motion for hero moments and key interactions.
5. Containment as Organization Visual grouping creates clarity. Use bento grid layouts where each card has different proportions, dark sections as punctuation in light pages, generous negative space (60-120px padding), and asymmetric compositions that guide the eye.
Dark Foundations Prefer warm blacks with subtle olive or brown undertones over pure black (#000000). Think #131313 to #1a1a1a with slight warmth. Avoid cold, blue-tinted blacks—they read sterile. The background should feel like comfortable night.
When going light, avoid pure white (#ffffff). Use cream, warm gray, or paper tones (#faf8f6, #faf9f5, #f5f4ed). Pure white reads clinical; warm white reads considered.
The Accent That Cuts Through Almost every composition needs ONE color doing all the work:
Anthropic-Adjacent Palette Harmony Rhyme with Anthropic's design language without copying:
The Formula
Dark mode: 90% warm dark background + 10% vibrant accent
Light mode: Warm off-white + strategic dark type + one accent
Prefer limited palettes. Single color family with variations, or 2-3 deliberately chosen colors. Reduces cognitive load and creates premium, focused appearance.
Avoid rainbow palettes, gradients for gradient's sake, or default "startup blue". Commit to a cohesive position: bold and saturated, moody and restrained, or high-contrast and minimal.
Display Type Treatments Typography carries the design's voice. Prefer interesting personality over default thinking—avoid Arial, Inter, Roboto, system stacks. Display type should be expressive, even risky. Font choices should be inseparable from the aesthetic direction.
Faux-ASCII Rendering Techniques:
Figlet for Big Headers Use the figlet npm package (https://www.npmjs.com/package/figlet) to render large ASCII art text. Creates impactful headers with retro terminal aesthetic. Works well for hero sections, section dividers, and page titles.
Scale & Hierarchy
The gap between display and body creates visual tension. Let dramatic scale jumps establish hierarchy—one well-proportioned headline does more than scattered emphasis.
Body Type Philosophy Clean, legible, stays out of the way. Display type talks; body type listens. Maintain clear visual distinction between content levels through weight contrast (700-900 headlines vs 400 body).
Geometric Technical Forms Embrace shapes that reference early computing and technical drawing:
Illustration Style: Technical Romance Illustrations should live in the space between technical precision and human warmth—smart enough to feel credible, warm enough to feel approachable.
Prefer line art with intention (single-weight strokes, isometric views, connected systems), dot/pixel compositions (constraint as style), geometric construction visible (circles and guides that built the form), and abstract data visualizations (not charts, but visual data as landscape).
Avoid blob people, generic SaaS illustrations, overly detailed 3D renders, and stock photography (almost never).
Breathing Room as Feature Interfaces should not fear emptiness. Generous spacing creates premium feel and improves scanability.
Bento Grid Layouts Feature grids where each card is different size and proportion. Creates visual interest through asymmetry while maintaining organizational clarity. Not everything needs to be the same height.
See also: examples/bento-grid-layout.tsx for complete implementation with varied card sizes, spring animations, and warm accents.
Asymmetry with Purpose The 50/50 split is fine, but 60/40 is more interesting. Text heavy on left with visual on right (or vice versa). Let content weight create natural pull.
Full-Bleed Moments Some sections should extend edge-to-edge. Creates rhythm through alternation. A dark section in a light page (or light in dark) creates natural hierarchy without needing explicit headers.
The Layout Pattern
Hero (full-bleed) → Feature cards (contained) →
Dark section (full-bleed) → Content grid (contained) →
Call-to-action (full-bleed)
Alternate between contained and full-bleed to create visual rhythm and guide attention.
Spring-Based Physics Replace traditional easing curves and durations with spring physics. Animations feel more fluid, natural, and alive when defined by physical properties rather than fixed timings.
Core Properties:
Two Motion Schemes:
Expressive Motion (Recommended Default) Use springs with lower damping, creating noticeable overshoot and bounce. Well-suited for:
Standard Motion (Functional Restraint) Use higher damping for subdued motion with minimal bounce. Appropriate for:
Implementation with Framer Motion Prefer Framer Motion for React animations with spring physics:
import { motion } from "framer-motion";
// Expressive spring
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{
type: "spring",
stiffness: 260,
damping: 20 // Lower damping = more bounce
}}
>
// Standard spring
<motion.div
transition={{
type: "spring",
stiffness: 300,
damping: 30 // Higher damping = less bounce
}}
>
When to Use Motion: Prioritize high-impact moments over scattered micro-interactions. One well-orchestrated page load with staggered reveals (using animation-delay) creates more delight than everything bouncing. Use scroll-triggering and hover states that surprise.
Focus on entrance animations, state transitions, and user feedback. Reserve expressive bounce for moments that deserve attention.
See also: references/motion-physics-guide.md for comprehensive spring parameter tuning, advanced patterns, debugging, and performance optimization.
Conceptual Approach For performant 2D ASCII animation from video or images, use PixiJS (2D WebGL renderer) rather than DOM manipulation. Rendering individual characters as DOM elements won't perform at scale.
High-Level Implementation Pattern:
// 1. Create custom Pixi Filter (fragment shader)
// Samples video/image texture, computes luminance,
// quantizes to grid, picks glyph from sprite-sheet atlas
const asciiFilter = new Filter(
undefined,
fragmentShaderCode, // GLSL shader
{
resolution: { x: width, y: height },
cellSize: 8, // ASCII cell size in pixels
time: 0 // For animation
}
);
// 2. Render with @pixi/react
import { Stage, Sprite } from "@pixi/react";
<Stage width={800} height={450}>
<Sprite
texture={videoTexture}
filters={[asciiFilter]}
/>
</Stage>
// 3. Animate by updating uniforms each frame
useTick((delta) => {
asciiFilter.uniforms.time += delta * 0.05;
});
Key Concepts:
Resources:
This technique scales to video-rate performance where DOM-based approaches fail.
See also:
references/advanced-ascii-animation.md for complete implementations with Three.js and regl, advanced effects (scanlines, dithering), performance optimization, and troubleshootingexamples/ascii-text-effect.tsx for figlet-based ASCII text components with typewriter and glitch effectsTextured Backgrounds Avoid defaulting to solid colors. Create atmosphere through contextual effects:
Component Libraries for Effects Reference these Aceternity UI and Magic UI components for modern background and interaction patterns:
Backgrounds:
Borders & Effects:
Text Animation:
Don't use all of them—select contextually appropriate effects that enhance rather than overwhelm.
See also: references/component-libraries.md for detailed catalog with descriptions, use cases, aesthetic fit ratings, integration guidance, and performance considerations for all Aceternity UI and Magic UI components.
Tailwind v4 Patterns Use CSS variables for theme consistency:
// Define in globals.css
:root {
--color-bg-dark: #131313;
--color-bg-light: #faf9f5;
--color-accent: #d97757;
--spacing-section: 6rem; /* 96px */
}
// Use in Tailwind classes
<div className="bg-[var(--color-bg-dark)] py-[var(--spacing-section)]">
Prefer Tailwind's built-in spacing scale (multiples of 4px) but override with CSS variables when you need specific brand values.
Component Composition Follow container/presenter pattern:
Use composition over configuration. Small, focused components that combine are more flexible than large components with many props.
Motion Integration Integrate Framer Motion at component level:
import { motion } from "framer-motion";
const Card = ({ children }: { children: React.ReactNode }) => (
<motion.div
whileHover={{ scale: 1.02 }}
transition={{ type: "spring", stiffness: 300, damping: 25 }}
className="p-6 rounded-lg bg-[var(--color-bg-light)]"
>
{children}
</motion.div>
);
TypeScript Rigor
Prefer explicit types over any. Use discriminated unions for component variants. Define strict prop interfaces with JSDoc comments for developer experience.
Not all projects deserve maximum expressiveness. Context determines intensity.
Go Full Expressive:
These contexts allow flourish—users expect personality and distinctive voice. Faux-ASCII treatments, bold motion, dramatic scale all work here.
Apply Restraint:
These contexts need calm, clear, functional design. Use subtle versions of the aesthetic: warm color palette without extreme contrasts, gentle spring motion instead of bounce, generous spacing without dramatic scale jumps.
The Dial System: Think of expressiveness as a dial from 1-10, not a binary switch:
Match the dial to user needs and project goals. Respect established UI patterns. Never sacrifice core functionality for visual appeal—expressive design enhances usability, doesn't replace it.
Generic AI-Generated Aesthetics → Context-Specific Character
Avoid overused font families that signal default thinking. Instead of Inter, Roboto, Arial, Space Grotesk, or system fonts, choose fonts with interesting personality matched to the project context. Display type should be expressive; body type should be refined.
Avoid cliched color schemes, particularly purple gradients on white backgrounds. Instead, commit to a cohesive position: bold and saturated, moody and restrained, or high-contrast and minimal. Use the 90/10 rule—one vibrant accent does more work than rainbow palettes.
Avoid predictable layouts and cookie-cutter component patterns. Instead, use asymmetry, unexpected scale jumps, bento grids with varied proportions, and full-bleed moments that create rhythm.
Decoration Without Purpose → Intentional Details
Avoid shapes that exist only to fill space or scattered visual elements with no function. Instead, every decorative element should serve the aesthetic direction: faux-ASCII patterns reference technical history, scanlines create retrofuture tension, dot matrices add warmth through constraint.
Avoid pure minimalism where empty isn't interesting. Instead, use intentional emptiness—generous negative space that creates breathing room and guides attention, not just absence of content.
Over-Animation → High-Impact Moments
Avoid parallax everything, scroll-jacking, and things constantly flying in from all directions. Instead, one well-orchestrated page load with staggered spring animations creates more delight than scattered micro-interactions.
Avoid traditional easing curves and fixed durations when spring physics would feel more alive. Instead, use Framer Motion springs with appropriate damping—expressive bounce for hero moments, standard springs for functional UI.
Maximalist Chaos → Controlled Density
Avoid "more is more" without consideration. Instead, match implementation complexity to aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist designs need restraint, elegance, and precision in spacing and typography.
Default Backgrounds → Atmospheric Depth
Avoid pure solid colors (especially #ffffff white or #000000 black). Instead, use textured backgrounds that match the overall aesthetic: warm blacks (#131313) with subtle olive tones, cream whites (#faf9f5), noise overlays, gradient meshes, or geometric patterns.
Pure Black and White → Warm Tones
Avoid pure black (#000000) and pure white (#ffffff). Instead, prefer warm blacks with olive/brown undertones (#131313-#1a1a1a) and cream/parchment whites (#faf9f5, #f5f4ed). The subtle warmth creates cohesion and prevents clinical feeling.
AI-Generated Imagery → Deliberate Visual Choices
Avoid AI-generated imagery unless used as deliberate aesthetic choice (glitchy, weird, intentionally artificial). Instead, use technical romance illustrations (line art, isometric views, pixel compositions), real product screenshots, or no imagery at all—let typography and color do the work.
Motion & Animation:
ASCII Art & Display Type:
Component Libraries:
Color Reference:
Remember: Claude is capable of extraordinary, award-worthy creative work. Commit relentlessly to a distinctive and unforgettable vision. The constraint (faux-ASCII, warm palette, spring physics) becomes the signature style.
Complete, production-ready React + TypeScript examples demonstrating the aesthetic in practice:
Hero Sections:
examples/hero-section.tsx - Complete hero with figlet ASCII art, spring animations, warm palette, technical grid background, and scroll indicatorsLayout Patterns:
examples/bento-grid-layout.tsx - Asymmetric grid with varied card sizes, spring animations on hover, glassmorphism effects, and warm accentsTypography Components:
examples/ascii-text-effect.tsx - Reusable ASCII text components with multiple fonts, typewriter effects, glitch animations, and scanline overlaysEach example includes:
Copy and adapt these examples as starting points for implementing the aesthetic in your projects.