frontier-ui

When to Use

Creating or modifying any UI component (buttons, cards, sections, etc.)
Designing new page sections
Adding interactive elements with hover states
Implementing typography and color schemes
Creating visual effects (glows, gradients, animations)
Working with responsive layouts

Critical Patterns

Color Palette

Backgrounds (Dark Theme)

Primary: bg-slate-950 (darkest)
Secondary: bg-slate-900, bg-slate-800
Accents: bg-slate-800/50 (semi-transparent)

Accent Colors

Primary: cyan (cyan-500, cyan-400, cyan-300)
Secondary: purple (purple-500, purple-400)
Success: green (green-400, green-500)
Info: blue (blue-500)
Warning: orange (orange-500)
Error: pink (pink-500)

Text Colors

Primary: text-slate-300, text-white
Secondary: text-slate-400
Muted: text-slate-500

Gradients

Text Gradients

astro

<span class="bg-gradient-to-r from-cyan-400 via-cyan-300 to-purple-400 bg-clip-text text-transparent">
  Frontier Code
</span>

Background Gradients

astro

<!-- Hero background -->
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>

<!-- Button gradient -->
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600"></div>
<div class="bg-gradient-to-r from-purple-500 to-cyan-500"></div>

<!-- Dynamic text gradient -->
<span class="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent"></span>

Typography

Hero Headings

astro

<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold">
  Title
</h1>

Subheadings

astro

<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-light text-slate-300">
  Subtitle
</h2>

Body Text

astro

<p class="text-lg sm:text-xl text-slate-400 leading-relaxed">
  Description text
</p>

Small Labels

astro

<span class="px-4 py-2 bg-slate-800/50 border border-cyan-500/30 rounded-full text-cyan-400 text-sm font-mono">
  &lt;Frontier /&gt;
</span>

Status Badges

astro

<div class="flex items-center gap-2">
  <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
  <span class="text-slate-500 text-sm font-mono">Status</span>
</div>

Spacing

Vertical Spacing

Sections: py-16 sm:py-20 lg:py-24
Margin between elements: mb-8, mb-12, mb-16
Gap: gap-2, gap-4, gap-8

Borders

Subtle Borders

astro

<!-- Outline button/badge -->
class="border-2 border-cyan-500/50"

<!-- Badge border -->
class="border border-cyan-500/30"

<!-- Hover state border -->
class="hover:border-cyan-400"

Rounded Corners

Buttons/badges: rounded-lg
Circular elements: rounded-full

Shadows & Glows

Text Shadow

astro

style="text-shadow: 0 0 40px rgba(0, 245, 255, 0.5);"

Blur Effects

astro

<!-- Background glow orbs -->
<div class="w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>

<!-- Button shadow -->
class="hover:shadow-lg hover:shadow-cyan-500/50"

Animations

Pulse Animation

astro

class="animate-pulse"
<!-- Add delay for staggered effects -->
style="animation-delay: 0.2s;"

Bounce Animation

astro

class="animate-bounce"

Custom Blink (Cursor)

astro

<style>
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .animate-blink {
    animation: blink 1s infinite;
  }
</style>
<span class="w-2 h-8 bg-purple-400 animate-blink"></span>

Transitions

Standard Transitions

astro

class="transition-all duration-300"

<!-- Hover effects -->
class="hover:scale-105"
class="hover:shadow-lg hover:shadow-cyan-500/50"
class="hover:bg-cyan-500/10"
class="hover:border-cyan-400 hover:text-cyan-300"

<!-- Opacity transitions -->
class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"

Buttons

Primary Gradient Button

astro

<a href="#" class="group relative px-8 py-4 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50">
  <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  <span class="relative flex items-center gap-2">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..." />
    </svg>
    <span>Button Text</span>
  </span>
</a>

Outline Button

astro

<a href="#" class="px-8 py-4 border-2 border-cyan-500/50 text-cyan-400 font-semibold rounded-lg hover:bg-cyan-500/10 hover:border-cyan-400 hover:text-cyan-300 transition-all duration-300 hover:scale-105">
  Button Text
</a>

Sections

Hero Section Structure

astro

<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-950">
  <!-- Background layers -->
  <div id="particles" class="absolute inset-0 opacity-20"></div>
  <div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>

  <!-- Glow orbs -->
  <div class="absolute top-0 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>
  <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>

  <!-- Grid pattern -->
  <div class="absolute inset-0 bg-[linear-gradient(rgba(0,245,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,245,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px]"></div>

  <!-- Content -->
  <Container>
    <div class="relative z-10 max-w-5xl mx-auto text-center">
      <!-- Content goes here -->
    </div>
  </Container>
</section>

Standard Section

astro

<section id="{id}" class="relative py-16 sm:py-20 lg:py-24 bg-slate-950">
  <Container>
    <div class="max-w-6xl mx-auto">
      <!-- Section content -->
    </div>
  </Container>
</section>

Container Pattern

astro

<div class="relative z-10 max-w-5xl mx-auto text-center">
  <!-- Centered content -->
</div>

<div class="max-w-6xl mx-auto">
  <!-- Full-width container -->
</div>

<div class="max-w-3xl mx-auto leading-relaxed">
  <!-- Text content -->
</div>

Responsive Design

Always use mobile-first responsive utilities:

astro

<!-- Spacing -->
class="py-16 sm:py-20 lg:py-24"

<!-- Typography -->
class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl"

<!-- Layout -->
class="flex flex-col sm:flex-row gap-4 justify-center"

Icons

astro

<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..." />
</svg>

Code Examples

Complete Badge Component

astro

---
const { label = '', color = 'cyan' } = Astro.props;
const colors = {
  cyan: 'text-cyan-400 border-cyan-500/30 bg-slate-800/50',
  purple: 'text-purple-400 border-purple-500/30 bg-slate-800/50',
  green: 'text-green-400 border-green-500/30 bg-slate-800/50'
};
---
<span class={`px-4 py-2 rounded-full text-sm font-mono border ${colors[color]}`}>
  {label}
</span>

Status Indicator with Delay

astro

---
const { status = '', color = 'green', delay = 0 } = Astro.props;
const colors = {
  green: 'bg-green-500',
  cyan: 'bg-cyan-500',
  purple: 'bg-purple-500'
};
---
<div class="flex items-center gap-2">
  <div class={`w-2 h-2 ${colors[color]} rounded-full animate-pulse`} style={`animation-delay: ${delay}s;`}></div>
  <span class="text-slate-500 text-sm font-mono">{status}</span>
</div>

Decision Tree: Which Style to Apply?

Situation	Use
Primary action	Gradient button `from-cyan-500 to-cyan-600`
Secondary action	Outline button `border-cyan-500/50`
Headings	Large with text gradient `from-cyan-400 via-cyan-300 to-purple-400`
Subheadings	Light weight `font-light text-slate-300`
Labels/badges	Rounded pill `rounded-full` with subtle border
Background	Dark `bg-slate-950` with gradient overlay
Glow effects	`bg-{color}/20 rounded-full blur-3xl`
Hover effects	`hover:scale-105 hover:shadow-lg hover:shadow-{color}/50`
Grid patterns	`bg-[linear-gradient(...)] bg-[size:50px_50px]`

Anti-Patterns

❌ Don't use:

White backgrounds for main sections (use slate-950/slate-900)
Solid colors without gradients for accents
Sharp corners on buttons/badges (use rounded-lg/rounded-full)
Heavy shadows without color tint (use shadow-{color}/50)
Text without spacing (add leading-relaxed)
Missing responsive utilities (always add sm: md: lg:)

Commands

No specific commands - UI is purely declarative through Tailwind classes.

Resources

Examples: Hero section at src/components/sections/Hero.astro
Color Reference: Use cyan/purple as primary accents, slate for neutrals
Animation Library: Tailwind built-in + custom @keyframes for blinking

Search AI Tools

Install this agent skill to your Project

Metadata

SKILL.md

When to Use

Critical Patterns

Color Palette

Gradients

Typography

Spacing

Borders

Rounded Corners

Shadows & Glows

Animations

Transitions

Buttons

Sections

Container Pattern

Responsive Design

Icons

Code Examples

Complete Badge Component

Status Indicator with Delay

Decision Tree: Which Style to Apply?

Anti-Patterns

Commands

Resources