diff --git a/app/imports/api/creature/properties/Effects.js b/app/imports/api/creature/properties/Effects.js
index 243f2ec2..d264b80b 100644
--- a/app/imports/api/creature/properties/Effects.js
+++ b/app/imports/api/creature/properties/Effects.js
@@ -2,13 +2,13 @@ import SimpleSchema from 'simpl-schema';
 import schema from '/imports/api/schema.js';
 import {makeChild} from "/imports/api/parenting.js";
 
-Effects = new Mongo.Collection("effects");
+let Effects = new Mongo.Collection("effects");
 
 /*
  * Effects are reason-value attached to skills and abilities
  * that modify their final value or presentation in some way
  */
-effectSchema = schema({
+let effectSchema = schema({
 	charId: {
 		type: String,
 		regEx: SimpleSchema.RegEx.Id,
diff --git a/app/imports/api/creature/properties/Proficiencies.js b/app/imports/api/creature/properties/Proficiencies.js
index 90317302..4c3e8dff 100644
--- a/app/imports/api/creature/properties/Proficiencies.js
+++ b/app/imports/api/creature/properties/Proficiencies.js
@@ -20,6 +20,10 @@ proficiencySchema = schema({
 		allowedValues: [0, 0.5, 1, 2],
 		defaultValue: 1,
 	},
+	skill: {
+		type: String,
+		optional: true,
+	},
 	type: {
 		type: String,
 		allowedValues: ["skill", "save", "weapon", "armor", "tool", "language"],
@@ -34,6 +38,6 @@ proficiencySchema = schema({
 Proficiencies.attachSchema(proficiencySchema);
 
 // Proficiencies.attachBehaviour("softRemovable");
-makeChild(Proficiencies, ["enabled"]);
+makeChild(Proficiencies, ["enabled", "name"]);
 
 export default Proficiencies;
diff --git a/app/imports/api/creature/properties/Skills.js b/app/imports/api/creature/properties/Skills.js
index 2d2e41b0..c03642cf 100644
--- a/app/imports/api/creature/properties/Skills.js
+++ b/app/imports/api/creature/properties/Skills.js
@@ -22,10 +22,12 @@ let skillSchema = schema({
   variableName: {
     type: String,
   },
+	// The variable name of the ability this skill relies on
   ability: {
     type: String,
     optional: true,
   },
+	// What type of skill is this
   type: {
     type: String,
     allowedValues: [
@@ -42,36 +44,49 @@ let skillSchema = schema({
   order: {
 	  type: SimpleSchema.Integer,
 	},
+	// If the baseValue is higher than the computed value, it will be used as `value`
 	baseValue: {
 		type: Number,
 		optional: true,
 	},
+	// The base proficiency of this skill
 	baseProficiency: {
 		type: Number,
 		optional: true,
 	},
+	// Computed value of skill to be added to skill rolls
   value: {
     type: Number,
 		defaultValue: 0,
   },
+	// Computed value added by the ability
+	abilityMod: {
+		type: SimpleSchema.Integer,
+		optional: true,
+	},
+	// Computed advantage/disadvantage
   advantage: {
     type: SimpleSchema.Integer,
     optional: true,
     allowedValues: [-1, 0, 1],
   },
+	// Computed bonus to passive checks
   passiveBonus: {
     type: Number,
     optional: true,
   },
+	// Computed proficiency multiplier
   proficiency: {
     type: Number,
     allowedValues: [0, 0.5, 1, 2],
 		defaultValue: 0,
   },
+	// Computed number of total conditional benefits
   conditionalBenefits: {
     type: SimpleSchema.Integer,
     optional: true,
   },
+	// Computed boolean of whether this skill is forced to fail
   fail: {
     type: SimpleSchema.Integer,
     optional: true,
diff --git a/app/imports/ui/character/StatsTab.vue b/app/imports/ui/character/StatsTab.vue
index 60d45939..4db53b02 100644
--- a/app/imports/ui/character/StatsTab.vue
+++ b/app/imports/ui/character/StatsTab.vue
@@ -180,6 +180,13 @@
 					data: {_id},
 				});
 			},
+			clickSkill({_id}){
+				this.$store.commit("pushDialogStack", {
+					component: "skill-dialog-container",
+					elementId: _id,
+					data: {_id},
+				});
+			},
 			hitDiceChange(_id, {type, value}){
 				if (type === 'increment'){
 					adjustAttribute.call({_id, increment: value});
diff --git a/app/imports/ui/components/AttributeDialog.vue b/app/imports/ui/components/AttributeDialog.vue
index 2f94bd67..ee5d8023 100644
--- a/app/imports/ui/components/AttributeDialog.vue
+++ b/app/imports/ui/components/AttributeDialog.vue
@@ -34,7 +34,6 @@
 </template>
 
 <script>
-	import store from "/imports/ui/vuexStore.js";
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import AttributeEffectList from '/imports/ui/components/AttributeEffectList.vue';
 	import AttributeEdit from '/imports/ui/components/AttributeEdit.vue';
diff --git a/app/imports/ui/components/AttributeDialogContainer.vue b/app/imports/ui/components/AttributeDialogContainer.vue
index ebb96cfe..eefad1b1 100644
--- a/app/imports/ui/components/AttributeDialogContainer.vue
+++ b/app/imports/ui/components/AttributeDialogContainer.vue
@@ -10,6 +10,8 @@
 	import AttributeDialog from '/imports/ui/components/AttributeDialog.vue';
 	import Attributes from '/imports/api/creature/properties/Attributes.js';
 	import { updateAttribute, adjustAttribute } from '/imports/api/creature/properties/Attributes.js';
+	import Effects from '/imports/api/creature/properties/Effects.js';
+
 	export default {
 		components: {
 			AttributeDialog,
diff --git a/app/imports/ui/components/SkillDialog.vue b/app/imports/ui/components/SkillDialog.vue
new file mode 100644
index 00000000..e4145dc3
--- /dev/null
+++ b/app/imports/ui/components/SkillDialog.vue
@@ -0,0 +1,108 @@
+<template lang="html">
+	<dialog-base class="skill-dialog">
+		<div slot="toolbar">
+			{{name}}
+		</div>
+		<div>
+			<v-layout align-center justify-center>
+				<skill-list-tile v-bind="$props"/>
+			</v-layout>
+			<skill-proficiency-list v-if="skillBaseProficiency" :effects="[skillBaseProficiency]"/>
+			<attribute-effect-list v-if="skillAbilityEffect" :effects="[skillAbilityEffect]"/>
+			<attribute-effect-list v-if="skillBaseEffect" :effects="[skillBaseEffect]"/>
+
+			<div v-if="proficiencies && proficiencies.length">
+				<h6 class="title">Proficiencies</h6>
+				<skill-proficiency-list :proficiencies="proficiencies" @click="clickedProficiency"/>
+			</div>
+			<div v-if="effects && effects.length">
+				<h6 class="title">Effects</h6>
+				<attribute-effect-list :effects="effects" @click="clickedEffect"/>
+			</div>
+		</div>
+		<div slot="edit">
+			<skill-edit :skill="$props" @change="(update, ack) => $emit('change', update, ack)"/>
+		</div>
+	</dialog-base>
+</template>
+
+<script>
+	import AttributeEffectList from '/imports/ui/components/AttributeEffectList.vue';
+	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+	import SkillEdit from '/imports/ui/components/SkillEdit.vue';
+	import SkillProficiencyList from '/imports/ui/components/SkillProficiencyList.vue';
+	import SkillListTile from '/imports/ui/components/SkillListTile.vue';
+
+	export default {
+		components: {
+			AttributeEffectList,
+			DialogBase,
+			SkillEdit,
+			SkillListTile,
+			SkillProficiencyList,
+		},
+		props: {
+			charId: String,
+			name: String,
+			variableName: String,
+			ability: String,
+			type: String,
+			order: Number,
+			baseValue: Number,
+			baseProficiency: Number,
+			value: Number,
+			abilityMod: Number,
+			advantage: Number,
+			passiveBonus: Number,
+			proficiency: Number,
+			conditionalBenefits: Number,
+			fail: Number,
+			effects: {
+				type: Array,
+				default: () => [],
+			},
+			proficiencies: {
+				type: Array,
+				default: () => [],
+			},
+			abilityDoc: Object,
+		},
+		computed: {
+			skillBaseEffect(){
+				if (!this.baseValue) return;
+				return {
+					_id: 'skillBaseValue',
+					name: `${this.name}`,
+					operation: 'base',
+					result: this.baseValue,
+					stat: this.variableName,
+					enabled: true,
+				};
+			},
+			skillAbilityEffect(){
+				if (!this.abilityDoc) return;
+				return {
+					_id: 'skillBaseValue',
+					name: this.abilityDoc.name,
+					operation: 'add',
+					result: this.abilityMod,
+					stat: this.variableName,
+					enabled: true,
+				};
+			},
+			skillBaseProficiency(){
+				if (!this.baseProficiency) return;
+				return {
+					_id: 'skillBaseValue',
+					name: `${this.name}`,
+					value: this.baseProficiency,
+					skill: this.variableName,
+					enabled: true,
+				};
+			},
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/SkillDialogContainer.vue b/app/imports/ui/components/SkillDialogContainer.vue
new file mode 100644
index 00000000..693b6ca3
--- /dev/null
+++ b/app/imports/ui/components/SkillDialogContainer.vue
@@ -0,0 +1,78 @@
+<template lang="html">
+  <skill-dialog
+		v-bind="skill"
+		:effects="effects"
+		:proficiencies="proficiencies"
+		:abilityDoc="abilityDoc"
+		v-on="{clickedEffect, clickedProficiency, change}"
+	/>
+</template>
+
+<script>
+
+	import SkillDialog from '/imports/ui/components/SkillDialog.vue';
+	import Skills from '/imports/api/creature/properties/Skills.js';
+	import { updateSkill } from '/imports/api/creature/properties/Skills.js';
+	import Attributes from '/imports/api/creature/properties/Attributes.js';
+	import Effects from '/imports/api/creature/properties/Effects.js';
+	import Proficiencies from '/imports/api/creature/properties/Proficiencies.js';
+
+	export default {
+		components: {
+			SkillDialog,
+		},
+		props: {
+			_id: String,
+		},
+		meteor: {
+			skill(){
+				return Skills.findOne(this._id);
+			},
+			abilityDoc(){
+				return this.skill && Attributes.findOne({
+					variableName: this.skill.ability,
+				});
+			},
+			effects(){
+				if (!this.skill) return;
+				let charId = this.skill.charId;
+				let stat = this.skill.variableName;
+				return Effects.find({
+					charId,
+					stat,
+					enabled: true,
+				}, {
+					sort: {order: 1},
+				}).fetch();
+			},
+			proficiencies(){
+				if (!this.skill) return;
+				let charId = this.skill.charId;
+				let stat = this.skill.variableName;
+				return Proficiencies.find({
+					charId,
+					stat,
+					enabled: true,
+				}, {
+					sort: {order: 1},
+				}).fetch();
+			},
+		},
+		methods: {
+			clickedEffect(e){
+				console.log(e);
+			},
+			clickedProficiency(e){
+				console.log(e);
+			},
+			change(update, ack){
+				updateSkill.call({_id: this._id, update}, error => {
+					ack(error);
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/SkillEdit.vue b/app/imports/ui/components/SkillEdit.vue
new file mode 100644
index 00000000..8ce115d7
--- /dev/null
+++ b/app/imports/ui/components/SkillEdit.vue
@@ -0,0 +1,11 @@
+<template lang="html">
+	<div>Todo</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/SkillListTile.vue b/app/imports/ui/components/SkillListTile.vue
index 7fc77572..a0fee87e 100644
--- a/app/imports/ui/components/SkillListTile.vue
+++ b/app/imports/ui/components/SkillListTile.vue
@@ -66,6 +66,9 @@ export default {
 	.skill-list-tile >>> .v-list__tile {
 		height: 34px;
 	}
+	.skill-list-tile{
+		background: inherit;
+	}
 	.prof-icon {
 		min-width: 30px;
 	}
diff --git a/app/imports/ui/components/SkillProficiencyList.vue b/app/imports/ui/components/SkillProficiencyList.vue
new file mode 100644
index 00000000..0e7f81c3
--- /dev/null
+++ b/app/imports/ui/components/SkillProficiencyList.vue
@@ -0,0 +1,11 @@
+<template lang="html">
+  <div>TODO</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/dialogStack/DialogComponentIndex.js b/app/imports/ui/dialogStack/DialogComponentIndex.js
index e722af04..259eb1c0 100644
--- a/app/imports/ui/dialogStack/DialogComponentIndex.js
+++ b/app/imports/ui/dialogStack/DialogComponentIndex.js
@@ -1,7 +1,9 @@
 import AttributeDialog from '/imports/ui/components/AttributeDialog.vue';
 import AttributeDialogContainer from '/imports/ui/components/AttributeDialogContainer.vue';
+import SkillDialogContainer from '/imports/ui/components/SkillDialogContainer.vue';
 
 export default {
   AttributeDialog,
   AttributeDialogContainer,
+  SkillDialogContainer,
 };