implementing-2d-graphics — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited implementing-2d-graphics (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Implement vector-based visual elements using WPF's 2D graphics system.
UIElement
└── Shape (FrameworkElement) ← Participates in layout, supports events
├── Ellipse
├── Rectangle
├── Line
├── Polyline
├── Polygon
└── Path
Drawing ← Lightweight, no events
├── GeometryDrawing
├── ImageDrawing
├── VideoDrawing
└── GlyphRunDrawing<!-- Ellipse -->
<Ellipse Width="100" Height="100"
Fill="Blue"
Stroke="Black"
StrokeThickness="2"/>
<!-- Rectangle -->
<Rectangle Width="100" Height="50"
Fill="Red"
Stroke="Black"
StrokeThickness="1"
RadiusX="10" RadiusY="10"/>
<!-- Line -->
<Line X1="0" Y1="0" X2="100" Y2="100"
Stroke="Green"
StrokeThickness="3"/>
<!-- Polyline (connected lines) -->
<Polyline Points="0,0 50,50 100,0 150,50"
Stroke="Purple"
StrokeThickness="2"
Fill="Transparent"/>
<!-- Polygon (closed shape) -->
<Polygon Points="50,0 100,100 0,100"
Fill="Yellow"
Stroke="Orange"
StrokeThickness="2"/><!-- Path: complex shapes -->
<Path Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="10,10" IsClosed="True">
<LineSegment Point="100,10"/>
<ArcSegment Point="100,100" Size="50,50"
SweepDirection="Clockwise"/>
<LineSegment Point="10,100"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<!-- Mini-Language syntax -->
<Path Data="M 10,10 L 100,10 A 50,50 0 0 1 100,100 L 10,100 Z"
Fill="LightGreen" Stroke="DarkGreen"/>| Command | Description | Example |
|---|---|---|
| M | MoveTo (start point) | M 10,10 |
| L | LineTo (straight line) | L 100,100 |
| H | Horizontal LineTo | H 100 |
| V | Vertical LineTo | V 100 |
| A | ArcTo (arc) | A 50,50 0 0 1 100,100 |
| C | Cubic Bezier | C 20,20 40,60 100,100 |
| Q | Quadratic Bezier | Q 50,50 100,100 |
| Z | ClosePath | Z |
Lowercase = relative coordinates, Uppercase = absolute coordinates
<Path Stroke="Black" StrokeThickness="2">
<Path.Data>
<!-- Rectangle Geometry -->
<RectangleGeometry Rect="10,10,80,60" RadiusX="5" RadiusY="5"/>
</Path.Data>
</Path>
<Path Stroke="Black" Fill="Yellow">
<Path.Data>
<!-- Ellipse Geometry -->
<EllipseGeometry Center="50,50" RadiusX="40" RadiusY="30"/>
</Path.Data>
</Path>
<Path Stroke="Black">
<Path.Data>
<!-- Line Geometry -->
<LineGeometry StartPoint="10,10" EndPoint="90,90"/>
</Path.Data>
</Path><Path Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="80,50" RadiusX="40" RadiusY="40"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>GeometryCombineMode:
<Path Fill="Coral" Stroke="DarkRed" StrokeThickness="1">
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<EllipseGeometry Center="50,50" RadiusX="45" RadiusY="45"/>
<EllipseGeometry Center="50,50" RadiusX="30" RadiusY="30"/>
</GeometryGroup>
</Path.Data>
</Path>FillRule:
<!-- SolidColorBrush -->
<Rectangle Fill="Blue"/>
<Rectangle Fill="#FF2196F3"/>
<!-- LinearGradientBrush -->
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#2196F3" Offset="0"/>
<GradientStop Color="#FF9800" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>📌 상세 가이드: /creating-wpf-brushes skill 참조<!-- Dashed line patterns -->
<Line X1="0" Y1="10" X2="200" Y2="10"
Stroke="Black" StrokeThickness="2"
StrokeDashArray="4,2"/>
<!-- Dot-dash pattern -->
<Line X1="0" Y1="30" X2="200" Y2="30"
Stroke="Black" StrokeThickness="2"
StrokeDashArray="4,2,1,2"/><Polyline Points="10,50 50,10 90,50"
Stroke="Blue"
StrokeThickness="10"
StrokeStartLineCap="Round"
StrokeEndLineCap="Triangle"
StrokeLineJoin="Round"/>LineCap: Flat, Round, Square, Triangle LineJoin: Miter, Bevel, Round
| Skill | Description |
|---|---|
/creating-wpf-brushes | All Brush patterns (Solid, Linear, Radial, Image, Visual) |
/creating-wpf-vector-icons | XAML vector icons, IconButton styles |
/creating-graphics-in-code | C# dynamic graphics (ShapeFactory, GeometryBuilder) |
| Element | Complexity | Recommended Use |
|---|---|---|
| Shape | High | Interactive elements (click, drag) |
| DrawingVisual | Low | Large static graphics |
| StreamGeometry | Lowest | Fixed complex paths |
// StreamGeometry: immutable, optimized
var streamGeometry = new StreamGeometry();
using (var context = streamGeometry.Open())
{
context.BeginFigure(new Point(0, 0), isFilled: true, isClosed: true);
context.LineTo(new Point(100, 0), isStroked: true, isSmoothJoin: false);
context.LineTo(new Point(100, 100), isStroked: true, isSmoothJoin: false);
}
streamGeometry.Freeze(); // Set immutable for performance improvement~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.