diff --git a/static/usage/skeleton-text/basic/angular/angular-ts.md b/static/usage/skeleton-text/basic/angular/angular-ts.md
deleted file mode 100644
index 1931197e875..00000000000
--- a/static/usage/skeleton-text/basic/angular/angular-ts.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```ts
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
-})
-export class AppComponent {
-  public loaded = false;
-}
-
-```
\ No newline at end of file
diff --git a/static/usage/skeleton-text/basic/angular/angular-html.md b/static/usage/skeleton-text/basic/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/basic/angular/angular-html.md
rename to static/usage/skeleton-text/basic/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/basic/angular/example_component_ts.md b/static/usage/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..8b30337848c
--- /dev/null
+++ b/static/usage/skeleton-text/basic/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+  public loaded = false;
+}
+
+```
\ No newline at end of file
diff --git a/static/usage/skeleton-text/basic/index.md b/static/usage/skeleton-text/basic/index.md
index a605ef2462f..33b4f57ee26 100644
--- a/static/usage/skeleton-text/basic/index.md
+++ b/static/usage/skeleton-text/basic/index.md
@@ -4,8 +4,8 @@ import javascript from './javascript.md';
 import react from './react.md';
 import vue from './vue.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularTS from './angular/angular-ts.md';
+import angularHTML from './angular/example_component_html.md';
+import angularTS from './angular/example_component_ts.md';
 
 <Playground
   code={{
@@ -14,8 +14,8 @@ import angularTS from './angular/angular-ts.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.ts': angularTS
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.ts': angularTS
       }
     },
   }}
diff --git a/static/usage/skeleton-text/theming/angular/angular-css.md b/static/usage/skeleton-text/theming/angular/example_component_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/angular-css.md
rename to static/usage/skeleton-text/theming/angular/example_component_css.md
diff --git a/static/usage/skeleton-text/theming/angular/angular-html.md b/static/usage/skeleton-text/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/skeleton-text/theming/angular/angular-html.md
rename to static/usage/skeleton-text/theming/angular/example_component_html.md
diff --git a/static/usage/skeleton-text/theming/index.md b/static/usage/skeleton-text/theming/index.md
index 7f7cde7b91d..a79907b63b6 100644
--- a/static/usage/skeleton-text/theming/index.md
+++ b/static/usage/skeleton-text/theming/index.md
@@ -2,13 +2,13 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import reactTSX from './react/react-tsx.md';
-import reactCSS from './react/react-css.md';
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
 
 import vue from './vue.md';
 
-import angularHTML from './angular/angular-html.md';
-import angularCSS from './angular/angular-css.md';
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
 
 <Playground
   code={{
@@ -22,8 +22,8 @@ import angularCSS from './angular/angular-css.md';
     vue,
     angular: {
       files: {
-        'src/app/app.component.html': angularHTML,
-        'src/app/app.component.css': angularCSS
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
       }
     },
   }}
diff --git a/static/usage/skeleton-text/theming/react/react-css.md b/static/usage/skeleton-text/theming/react/main_css.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/react-css.md
rename to static/usage/skeleton-text/theming/react/main_css.md
diff --git a/static/usage/skeleton-text/theming/react/react-tsx.md b/static/usage/skeleton-text/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/skeleton-text/theming/react/react-tsx.md
rename to static/usage/skeleton-text/theming/react/main_tsx.md