funky-purple-container-tech — Claude Code skill: setup and design

---
name: funky-purple-container-tech
description: "Create a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects."
---

# Funky Purple Container Tech Skill

## Use When
- Create a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.

## Workflow

## Scope
- Apply this as a full design-system direction across outer shell, containers, cards, search bars, navigation, accent objects, and supporting motion.
- Use it when the interface should feel technical and premium, but also slightly funky, expressive, and fashion-forward rather than purely enterprise.
- This is not generic cyberpunk and not plain dashboard dark mode. It should blend strong container structure with vivid purple energy and a few playful futuristic gestures.

## Visual target
- Build the experience on a near-black base with one or more large framed containers defining the composition.
- Use purple, fuchsia, or magenta as the primary accent family, with optional blue undertones for depth, glow, or secondary lighting.
- Let containers drive the system: bordered shells, rounded search/input bars, floating cards, inset panels, and framed side rails should create the page hierarchy.
- Keep the structure technical with thin borders, corner squares, vertical frame lines, and measured spacing, but allow a few funky hero elements such as a glowing orb, rotating text ring, floating card, or exaggerated lighting bloom.
- The result should feel like a futuristic talent platform, product shell, or creative tech network rather than a strict corporate dashboard.

## Implementation guidance
- Prefer a centered max-width master container with visible outer boundaries, border rails, and corner markers so the page feels housed inside a deliberate system shell.
- Use layered container treatments: rounded pills, framed cards, border-gradient wrappers, and translucent dark panels with subtle blur.
- Introduce a purple focal object or atmospheric anchor such as a glowing sphere, radial floor-light, floating badge, or animated line field that energizes the composition.
- Typography can stay clean and modern, but supporting UI should use uppercase utility text, micro-labels, and structured metadata for technical credibility.
- Search bars, action rows, and floating cards should look premium and tactile, with dark fill, soft inner shadow, gradient edge treatment, and accent hover response.
- Motion should feel smooth and stylish: masked text reveals, floating hero objects, slow pulse on glows, drifting line animations, or gentle ring rotation are good fits.

## Recommended patterns
- Large dark container with border-x rails, tiny corner squares, and inner sections arranged within a clear technical grid.
- Rounded search or filter bars wrapped in subtle gradient borders, placed inside a dark glass-like shell.
- Floating info card using a purple-to-blue accent edge, high-radius corners, and strong depth separation from the background.
- Decorative focal objects such as glowing purple spheres, orbit rings, ambient bottom lighting, or animated line fields that sit behind the content.
- Footer or action bars that continue the container language with segmented inputs and restrained accent arrows or chips.

## Tuning knobs
- Purple mood: shift between richer magenta, electric fuchsia, or cooler violet depending on how playful or premium the page should feel.
- Container roundness: keep the shells rounded and polished, but balance them with crisp frame logic so the design stays technical.
- Funk factor: add or reduce dramatic focal objects, glows, and animated decorative elements depending on how experimental the design should be.
- Lighting: keep bloom and underglow concentrated around hero objects or focal surfaces rather than washing the whole page.
- Structure density: add or reduce rails, corner marks, and side modules so the layout can lean more clean or more instrumented.

## Avoid
- Flat dark pages with purple accents but no meaningful container hierarchy.
- Turning every surface neon so the composition loses focus.
- Generic SaaS card grids that ignore the central framed shell.
- Overdoing the weirdness until the interface stops feeling premium and usable.
- Mixing too many unrelated accent colors that weaken the purple-led identity.