Skill v1.0.1

currentAutomated scan100/100

sickn33/agentic-awesome-skills/isometric-design

+4 new

──Details

PublishedOctober 27, 2026 at 08:19 AM

Content Hashsha256:0bca35d7bc2945b8...

Git SHA8dc8f7b22a6a

Bump Typepatch

Compare with v1.0.0

──Files

Files (1 file, 7.6 KB)

SKILL.md7.6 KBactive

SKILL.md · 231 lines · 7.6 KB

name: isometric-design description: Web and App implementation guide for Isometric Design. Trigger when user wants angled 3D appearances without vanishing points, often used for technical illustrations. date_added: "2026-06-17" risk: safe source: self source_type: self metadata: version: "1.0.1"

Isometric Design

"The architect's view. A parallel projection where depth is constant and parallel lines never converge."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

Parallel Lines: Isometric projection is an orthographic 3D projection with equal axis foreshortening; its projected axes are 120 degrees apart. Perspective is not required.
Top-Down, Angled View: The classic "SimCity" perspective.
Blocky Architecture: UI elements often look like city blocks or stacked tiles.

Visual DNA

Colors: Warm Tech or Earth-Grounded Elegance. Isometric designs often look like physical models, so slightly muted, realistic colors work well.
Typography: Keep text flat to the screen, or map it perfectly to the isometric planes (top, left, right).
Shadows: Hard, long drop shadows cast at an exact angle (usually -45 or 45 degrees).

Web Implementation

CSS transforms are perfect for this. The 60°/−45° examples below are stylized oblique tiles, not exact mathematical isometric projections. An orthographic camera aligned to (1,1,1) gives equal axis foreshortening.
CSS Example:

css

.isometric-grid {
  /* The foundation */
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
}
 
.iso-block {
  width: 100px;
  height: 100px;
  background-color: var(--secondary-base);
  position: relative;
  transition: transform 0.3s;
}
 
/* Creating the 3D block with pseudo-elements */
.iso-block::before {
  content: '';
  position: absolute;
  width: 20px; /* Depth */
  height: 100%;
  background-color: var(--primary-text); /* Darker shade for side */
  right: 100%;
  transform-origin: right;
  transform: skewY(-45deg);
}
 
.iso-block::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 20px; /* Depth */
  background-color: var(--cta-highlight); /* Lightest shade for top/bottom */
  top: 100%;
  transform-origin: top;
  transform: skewX(-45deg);
}
 
.iso-block:hover {
  transform: translateZ(20px) translate(-10px, -10px);
}

App Implementation

SwiftUI

swift

struct IsometricView: View {
    var body: some View {
        ZStack {
            Color.white.ignoresSafeArea()
            
            // Isometric Stack
            VStack(spacing: 0) {
                // Top layer
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 150, height: 150)
                    .overlay(Text("TOP").foregroundColor(.white))
                
                // Shadow simulation
                Rectangle()
                    .fill(Color.black.opacity(0.2))
                    .frame(width: 150, height: 20)
            }
            // Stylized oblique transform, not exact isometric projection
            .rotationEffect(.degrees(-45))
            .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
        }
    }
}

SwiftUI's .rotation3DEffect can produce a stylized tile; its default perspective must be disabled when strict parallel projection is needed. Rotate Z by -45 degrees first (via .rotationEffect), then rotate X by 60 degrees.
You can stack multiple views along the Z-axis (or simulate it with Y offsets before the 3D rotation) to create towering isometric city blocks.

Flutter

dart

import 'dart:math';
 
class IsometricScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Transform(
          // The Isometric Matrix Math
          alignment: FractionalOffset.center,
          transform: Matrix4.identity()
            // No perspective term for parallel projection.
            ..rotateX(pi / 3) // 60 degrees
            ..rotateZ(-pi / 4), // -45 degrees
          child: Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.blue,
              boxShadow: [
                // Hard isometric drop shadow
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: const Offset(20, 20),
                  blurRadius: 0, // No blur for isometric
                ),
              ],
            ),
            child: const Center(child: Text('ISO BLOCK', style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

Transform with Matrix4 is required in Flutter. Applying rotateX and rotateZ produces the stylized tile shown here.
Isometric shadows are usually completely hard (0 blurRadius) and offset perfectly along the grid axes.

React Native

jsx

const IsometricScreen = () => {
  return (
    <View style={{ flex: 1, backgroundColor: '#FFF', justifyContent: 'center', alignItems: 'center' }}>
      
      <View style={{
        width: 150,
        height: 150,
        backgroundColor: '#2196F3',
        justifyContent: 'center',
        alignItems: 'center',
        
        // Isometric Transforms
        transform: [
          { rotateX: '60deg' },
          { rotateZ: '-45deg' }
        ],
        
        // Hard isometric shadow
        shadowColor: '#000',
        shadowOffset: { width: 20, height: 20 },
        shadowOpacity: 0.3,
        shadowRadius: 0, // Hard edge
        elevation: 10,
      }}>
        <Text style={{ color: '#FFF', fontWeight: 'bold' }}>ISO BLOCK</Text>
      </View>
      
    </View>
  );
};

The transform array processes in order. Apply rotateX then rotateZ.
Hard shadows (shadowRadius: 0) sell the illustration look.

Jetpack Compose

kotlin

@Composable
fun IsometricScreen() {
    Box(
        modifier = Modifier.fillMaxSize().background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .graphicsLayer {
                    // Isometric Transforms
                    rotationX = 60f
                    rotationZ = -45f
                    // Add subtle scale if it gets clipped
                    scaleX = 0.8f
                    scaleY = 0.8f
                }
                .size(150.dp)
                // Draw a hard shadow behind the box
                .drawBehind {
                    drawRect(
                        color = Color.Black.copy(alpha = 0.3f),
                        topLeft = Offset(40f, 40f), // Isometric offset
                        size = size
                    )
                }
                .background(Color(0xFF2196F3)),
            contentAlignment = Alignment.Center
        ) {
            Text("ISO BLOCK", color = Color.White, fontWeight = FontWeight.Bold)
        }
    }
}

Use Modifier.graphicsLayer to apply rotationX and rotationZ.
To get a true hard isometric drop shadow in Compose without elevation blurring, use Modifier.drawBehind to manually draw a dark rectangle offset from the main content.

Do's and Don'ts

DO: Use it for infographics, feature diagrams, or hero sections.
DON'T: Build your entire app's functional UI in isometric projection. It's too hard to interact with.

Limitations

This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
Ensure appropriate contrast ratios and responsive behaviors are verified separately.

← v1.0.0 All versions