Toolverse
All skills
UX / Design

design-system-developer

by anyproto

Context-aware routing to the Anytype iOS design system including icons, typography, colors, and spacing. Use when working with Figma-to-code translation, design assets, or UI components.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
anyproto
Category
UX / Design
Views
9
GitHub repo

About this skill

Context-aware routing to the Anytype iOS design system including icons, typography, colors, and spacing. Use when working with Figma-to-code translation, design assets, or UI components.

How to use

  1. Skill aktywuje się automatycznie, gdy pracujesz z ikonami, typografią, kolorami lub plikami w folderze DesignSystem/ lub Assets.xcassets. Możesz też ręcznie go uruchomić, gdy dyskutujesz o komponentach UI.

  2. Aby dodać nową ikonę, wyeksportuj SVG z Figmy (np. "32/qr code" → QRCode.svg), umieść plik w odpowiednim folderze Assets.xcassets/DesignSystem/x32/QRCode.imageset/, a następnie uruchom polecenie make generate.

  3. W kodzie Swift używaj ikon poprzez stałe systemu designu, nigdy nie hardkoduj nazw. Dla ikony 32pt (najczęstszy przypadek): Image(asset: .X32.qrCode). Dla ikon mniejszych (18pt toolbar, 24pt listy) lub większych (40pt funkcje) dostosuj rozmiar.

  4. Typografia mapuje się bezpośrednio ze stylów Figmy na enumy Swift. Dla tytułów ekranu użyj AnytypeText("Settings", style: .uxTitle1Semibold), dla sekcji .uxTitle2Semibold, dla tekstu głównego .bodyRegular, a dla małych etykiet .caption1Medium (bez prefiksu "ux").

  5. Spacing obliczaj według wzoru: pozycja Y następnego elementu minus (pozycja Y bieżącego elementu plus jego wysokość). Zawsze korzystaj ze stałych systemu designu zamiast wartości na sztywno.

  6. Po każdej zmianie w zasobach (dodanie ikony, zmiana koloru) uruchom make generate, aby kod został zaktualizowany i spójny z systemem designu.

Related skills

3d-graphics

by samhvw8

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build,

UX / Design
2595

mermaid

by iOfficeAI

Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

UX / Design
1881

penpot-uiux-design

by github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms,

UX / Design
1788

writing-rap-lyrics

by asvskartheek

Helps write rap lyrics with proper rhythm, flow, cadences, and structure. Teaches musical fundamentals (bars, beats, tempo, BPM) and lyric formatting. Use when writing rap lyrics, creating verses, understanding flow, structuring bars, improving cadence, learning rhythm patterns,

UX / Design
21102

content-trend-researcher

by alirezarezvani

Advanced content and topic research skill that analyzes trends across Google Analytics, Google Trends, Substack, Medium, Reddit, LinkedIn, X, blogs, podcasts, and YouTube to generate data-driven article outlines based on user intent analysis

UX / Design
20116

error-handling-patterns

by wshobson

Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling, designing APIs, or improving application reliability.

UX / Design
22145