Resources

Ressourcen

Diese Seite sammelt nützliche Tools, Templates, externe Ressourcen und Materialien, die bei der Arbeit mit Celestia helfen.

Design Tools

Figma

Plugins:

• Stark – Kontrast-Prüfung und Accessibility-Checks
• A11y - Color Contrast Checker – Farbkontrast-Validierung
• Color Blind – Simulation von Farbblindheit
• Iconify – Zugriff auf Icon-Bibliotheken
• Tokens Studio – Design Token Management
• Autoflow – User Flow Diagramme

Widgets:

• Celestia Component Library – Unsere Figma-Komponenten
• Design Token Documentation – Token-Referenz

Zusätzliche Design-Tools

Farb-Tools:

• Coolors – Farbpalette-Generator
• Color Hunt – Farbinspiration
• Adobe Color – Farbharmonien
• WhoCanUse – Kontrast-Checker mit verschiedenen Sehstörungen

Typografie:

• Google Fonts – Kostenlose Webfonts
• Type Scale – Typografie-Skalierung
• Modular Scale – Modulare Typografie

Development Tools

Code Editoren

Visual Studio Code:

• Extensions:
  • Astro – Astro Language Support
  • ESLint – Linting
  • Prettier – Code Formatting
  • Tailwind CSS IntelliSense – Autocomplete
  • TypeScript Importer – Automatische Imports
  • Auto Rename Tag – HTML/JSX
  • Better Comments – Kommentar-Highlighting
  • Error Lens – Inline Error Display
  • GitLens – Git Integration
  • Code Spell Checker – Rechtschreibprüfung

Browser DevTools

Chrome/Firefox:

• Lighthouse – Performance, Accessibility, SEO
• axe DevTools – Accessibility Testing
• Web Vitals – Core Web Vitals Extension
• WAVE – Accessibility Evaluation
• CSS Peeper – CSS Inspection
• WhatFont – Font Identification

Build Tools

Package Manager:

• Bun – All-in-one JavaScript Runtime

Bundler:

• Vite – Next Generation Frontend Tooling
• Webpack – Module Bundler
• Rollup – JavaScript Bundler

Testing Tools

Unit & Integration Testing

• Vitest – Blazing Fast Unit Test Framework
• Jest – JavaScript Testing Framework
• Testing Library – Testing Utilities
• Playwright – End-to-End Testing
• Cypress – E2E Testing Framework

Visual Testing

• Chromatic – Visual Regression Testing für Storybook
• Percy – Visual Testing Platform
• Applitools – AI-Powered Visual Testing

Accessibility Testing

• axe DevTools – Browser Extension
• WAVE – Web Accessibility Evaluator
• Pa11y – Automated Accessibility Testing
• Lighthouse – Integrated in Chrome

Performance Testing

• Lighthouse CI – Performance CI
• WebPageTest – Web Performance Testing
• GTmetrix – Performance Analysis
• PageSpeed Insights – Google Performance Tool

Documentation Tools

Dokumentation-Plattformen

• Astro Starlight – Unsere Dokumentations-Plattform
• Docusaurus – React-basierte Dokumentation
• VuePress – Vue-basierte Dokumentation
• Storybook – Component Documentation

API Documentation

• Swagger/OpenAPI – API Specification
• ReadMe – API Documentation Platform
• Redoc – OpenAPI Documentation

Diagramme

• Miro – Collaborative Whiteboard
• FigJam – Figma’s Whiteboard
• draw.io – Free Diagram Tool
• Excalidraw – Hand-drawn Style Diagrams

Learning Resources

Design Systems

Bücher:

• “Design Systems” by Alla Kholmatova
• “Atomic Design” by Brad Frost
• “Building Design Systems” by Sarrah Vesselov & Taurie Davis
• “Laying the Foundations” by Andrew Couldwell

Kurse:

• Design Systems Course – Figma
• Storybook Tutorial – Official
• Accessibility Course – Google

Blogs & Newsletters:

• Design Systems Repo
• Design Systems News
• Brad Frost’s Blog

Web Development

Online-Kurse:

• MDN Web Docs – Mozilla Documentation
• web.dev – Google Web Fundamentals
• JavaScript.info – Modern JavaScript Tutorial
• Astro Docs – Astro Framework

YouTube Channels:

• Web Dev Simplified
• Fireship
• Kevin Powell – CSS
• Traversy Media

Accessibility

Guidelines:

• WCAG 2.1 – Official Guidelines
• WAI-ARIA – Accessibility Spec
• A11y Project – Community Resource
• WebAIM – Accessibility Resources

Templates

Design Templates

Figma Templates:

• Component Template – Standard-Struktur für neue Komponenten
• Page Template – Layout für neue Seiten
• User Flow Template – Flow-Diagramm-Struktur

Zugriff:

• In Figma unter “Celestia Templates”
• Kopieren und anpassen

Code Templates

Component Template:

ComponentName.astro

---
interface Props {
  // Define props here
}

const { /* props */ } = Astro.props;
---

<div class="component-name">
  <slot />
</div>

<style>
  .component-name {
    /* styles */
  }
</style>

Story Template:

ComponentName.stories.ts

import type { Meta, StoryObj } from "@storybook/react";
import { ComponentName } from "./ComponentName";

const meta: Meta<typeof ComponentName> = {
  component: ComponentName,
  title: "Components/ComponentName",
};

export default meta;
type Story = StoryObj<typeof ComponentName>;

export const Default: Story = {};

Test Template:

ComponentName.test.ts

import { describe, it, expect } from "vitest";

describe("ComponentName", () => {
  it("should render correctly", () => {
    // Test code
  });
});

Dokumentation Templates

Neue Seite:

---
title: Page Title
description: Short description
---

# Page Title

Introduction text...

## Section 1

Content...

## Section 2

Content...

### Subsection

More content...

## Best Practices

### Dos

- Point 1
- Point 2

### Don'ts

- Point 1
- Point 2

---

_Closing remark..._

Icon Libraries

Empfohlene Bibliotheken

Tabler Icons (Primary):

• 4500+ Icons
• SVG-based
• Customizable
• Website

Alternativen:

• Heroicons – By Tailwind Labs
• Phosphor Icons – Flexible weight
• Lucide – Clean & consistent
• Feather Icons – Minimal

Font Libraries

Kostenlose Fonts

Google Fonts:

• Roboto
• Open Sans
• Source Sans Pro

Andere:

• Font Squirrel – Free fonts
• Adobe Fonts – Included with CC

Stock Resources

Bilder

• Unsplash – Free photos
• Pexels – Free stock photos
• Lorem Picsum – Placeholder images

Illustrationen

• unDraw – Open-source illustrations
• Humaaans – Mix-and-match illustrations
• Blush – Customizable illustrations

Icons & Graphics

• SVG Repo – SVG collection
• Simple Icons – Brand icons
• Iconoir – Open-source icons

---

Diese Ressourcen-Sammlung wird kontinuierlich erweitert. Vorschläge für neue Ressourcen können jederzeit eingereicht werden.